Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
nagineni kaleshachowdary
45
Donut chart legend and label broken/does not render correctly for lower data values in chart
posted

I found a issue with Angular Donut chart legend and label does not work for lower data values. 
for example I have the below dataset and link to sample https://stackblitz.com/edit/github-npqlpu?file=src%2Fapp%2Fdoughnut-chart-legend%2Fdoughnut-chart-legend.component.ts

this.data = [
      { Value: 37, Label: 'Cooling', Summary: 'Cooling 37%' },
      { Value: 25, Label: 'Residential', Summary: 'Residential 25%' },
      { Value: 12, Label: 'Heating', Summary: 'Heating 12%' },
      { Value: 1, Label: 'Lighting', Summary: 'Lighting 1%' },
      { Value: 28, Label: 'Other', Summary: 'Other 18%' }
    ];
In the above data set Lighting value is 1 which shares very low percentage in donut chart but when chart rendered the you can observe that the label and legend display as others instead of Lighting 1%. this is happening for lower data values only.
 
please suggest any workaround for this. 
Thanks,
Kalesha.
Parents
No Data
Reply
  • 34430
    Verified Answer
    Offline posted

    Hello Kalesha,

    By default in the IgxDoughnutChart, there is an "others slice" that is determined based on the data that is bound to the chart and it will summarize all small outliers into a single slice. This others slice can be turned off by setting the "othersCategoryThreshold" property on the igx-ring-series to 0. This will prevent the others slice from showing, and then all of your data items will appear in the chart.

    Please let me know if you have any other questions or concerns on this matter.

Children
No Data