How to Render Donut Chart Legend Shapes without innerRadius applied to e-acc-series

Question

Hey there,How does a developer render out a rectangle legendShape without an innerRadius?Currently all the legend shapes all have inner radiuses. If a developer removes innerRadius from the e-accummulation-series element then the legendShapes will also render w/o an innerRadius.I've attached a link to a stackblitz where I'm trying to achieve my goal: https://stackblitz.com/edit/donut-chart-syncfusion-innerradius-legendThanks,Kobe

Durga Gopalakrishnan · Accepted Answer

Hi Kobe,

Greetings from Syncfusion.

Your requirement can be achieved using accumulation chart loaded. We suggest you customize the legend items color after chart is rendered. We have attached modified sample for your reference. 





public loaded(args: ILoadedEventArgs): void { 
    var legendGroup = document.getElementById("chart-container")
      .querySelectorAll('[id*="chart-container_chart_legend_shape_marker_"]');
    // to change legend item shape color
    if (legendGroup != null) {
      for (let i = 0; i < legendGroup.length; i++)
        legendGroup[i].setAttribute(
          "fill",
          legendGroup[i].getAttribute("stroke")
        );
    }  }

Sample : https://stackblitz.com/edit/donut-chart-syncfusion-innerradius-legend-d8n67h

Please revert us if you have any concerns.

Regards,
Durga G