Pie chart: Wrong color is displaying on pie chart compared to legends color

[Hardik-Vibe]

Description There is a mismatch between pie chart color and legends color. This case is specific to key and key length only. If you have numeric keys like [1000,10000] ( it should be > 999) then you are able to reproduce this issue. I have gone through the library and I found that when we are displaying legends at that moment we are fetching color based on actual key and we display legends using 'formattedLegend' variable. I have attached screenshot of that code. File - /lib/common/legend/legend.component.ts

But while plotting pie chart, It is fetching color based on formattedLabel which is local string. If you convert 1000 to local string then it will return '1,000' and hence from color scale which is generate using actual value return random color from color list. File - /lib/pie-chart/pie-series.component.ts

I have also checked same case with other charts but they are working fine as we have used actual label to fetch color. File - /lib/bar-chart/series-vertical.component.ts

To Reproduce I have created sample project so you can easily reproduce it. https://stackblitz.com/edit/ngx-pie-chart-mzmcpb But if you want to reproduce this please use below data set.

data = [{ "name": 10, "value": 2 }, { "name": 100001, "value": 1 }, { "name": 100003, "value": 3 }];

colorScheme = { domain: ['#00586E', '#FF8300', '#3FAE29', '#00ADC9', '#854FC3', '#809EBC', '#2F1A45', '#9C4F24', '#6EB4E7', '#3E6D30', '#E30200', '#83888E'] };

Expected behavior Legends colors and pie chart colors should be same.

Screenshots

Demo https://stackblitz.com/edit/ngx-pie-chart-mzmcpb

ngx-charts version I have used version 12.0.1

[Hardik-Vibe]

Any update on this?

[Hardik-Vibe]

@marjan-georgiev any update on this ?

[GITKumar22A]

i have same problem.

[Jusztine]

Hey there, I think the reason why it doesnt match because we need to reset the loop of the array in the legend color currently it continues where it left of..

for example i have this colorScheme ['#0FC3FA', '#0A54FF', '#FF0000', '#fcba03', '#FF007F']

when i select something then it shows the pie-chard the first two colors and then redirecting to another page... then select again it continue to the third item in the array which is red instead of going back to skyblue

So yeah I think the solution would be have a method, to reset the color loop back to the first color in the array each time a different view is selected..