Hello, I was wondering if there is a way how to achieve a stable custom colour palate for a doughnut/pie chart.
Lets say this is the data:
private testData = [ { statusName: 'Status 1', agentCount: 9 }, { statusName: 'Status 2', agentCount: 18 }, { statusName: 'Status 3', agentCount: 1 }, { statusName: 'Status 4', agentCount: 14 }, { statusName: 'Status 5', agentCount: 3 }, { statusName: 'Status 6', agentCount: 14 }, ];
Hello Patrik,
Thank you for posting.
We have a brushes property off the ring series ,which you can use to color each slice per your requirement. Like this:
<igx-doughnut-chart #chart height="90%" width="100%" > <igx-ring-series [dataSource] = "months" valueMemberPath="Value" labelMemberPath="Label" labelsPosition="Center" brushes="#1ea8b4, #20a026, #c78d0f, #888888…….”> </igx-ring-series> </igx-doughnut-chart>
Also to make you turn off the other slice by setting OthersCategoryThreshold to 0.
Let me now if you have any question.
Regards
Hello,Thank you for your answer.However it seems that the brushes field does not have any affect on my graph colour palate. I have tried to apply them both in HTML and TS file. I even copied the example from doughnut chart documentation. The result is still the same.
Thank you for the update.
I did little investigation about the differences between the samples and find that the samples in the Angular docs currently have some separate CSS applied that may affecting the appearance of the charts.
This is because the theming of the charts is under construction and may be receiving a few minor changes soon. And this CSS does not exist in the StackBlitz and that why its working fine. , so to avoid that confusion and trying to understand if the control’s brush property has a issue I created a isolated sample and find its all working fine.
And you are right my satckblitz was not loading for me too using that link J I am sorry for that.
Attached my isolated sample application , may be you can use that sample instead.
Regards,
testsample.zipimage.zip
Hello, Thank you very much for all the troubles, It seems you are right about the igx-theme. I have been playing around for a while and I just found out that as soon as I comment out the line "@include igx-theme();" from styles.css, the chart colours brushes are being applied.However, then my theme is obviously not applied at all and the rest of the page style breaks. Is there any workaround for this please?
Hello,
I updated my sample , applied the global igx-theme($default-palette) and able to reproduce the issue. Default palette is taking precedence over brushes property.
I am going to log this bug into our internal bug tracking system.
I have also opened a private case CAS-211611-J6D1V8 for you so that I can link it to this development issue. This way you will be notified automatically when the dev issue is updated. The case number is CAS-126342-L4B1T8.
You will see it located here: https://www.infragistics.com/my-account/support-activity
Let me know if you have any questions regarding this matter.
Hello, May I know if this issue has been fixed? we have upgrade our Ignite UI from version 9 to 11. it broken all of our chart colors.
Hello, As far as I know the colour brushes have not been fixed yet. I have been waiting for the fix for about 2 months and for any form of an update for about a month.