Hi, came across this quirk of the igDoughnutChart today and was wondering if there is anything I can do to prevent it from happening. It looks like when the value of one of the segments is quite small the graph control changes the colours used for the chart, even if they are explicity defined.
For example, code 1:
<script> $(function () {
var data = [ { "CountryName": "China", "Pop1990": 1000 }, { "CountryName": "India", "Pop1990": 849 }, { "CountryName": "United States", "Pop1990": 250 }, { "CountryName": "Indonesia", "Pop1990": 178 }, { "CountryName": "Brazil", "Pop1990": 150 } ];
var chartColours = [ "#77B5C5", "#C0C0C0", "#81AE7A", "#FAA958", "#A77DBF" ]; $("#chart").igDoughnutChart({ width: "100%", height: "300px", series: [{ name: "Pop1990", labelMemberPath: "CountryName", valueMemberPath: "Pop1990", dataSource: data, labelsPosition: "bestFit", formatLabel: function (context) { return context.itemLabel + " (" + context.item.Pop1990 + ")"; }, brushes: chartColours }] }); }); </script>
and code 2:
var data = [ { "CountryName": "China", "Pop1990": 10 }, { "CountryName": "India", "Pop1990": 849 }, { "CountryName": "United States", "Pop1990": 250 }, { "CountryName": "Indonesia", "Pop1990": 178 }, { "CountryName": "Brazil", "Pop1990": 150 } ];
The only difference between these is the value for 'China' has been reduced from 1000 to 10. Also, the chart colours have been explicitly defined. However, the two charts that are produced use different colours for the segments. For Code 1, China is blue (the first colour defined) but for Code 2 China is now purple (the last colour in colour array) and India is blue.
To maintain consistency for the charts I am producing I would like so China is always the same colour, is this possible?
I've found a fix for this:
othersCategoryType: "number", othersCategoryThreshold: 0,
on the chart options stops the "other" category being created - I guess this was the issue I had with the above example.
Hi Tom Warsop,
Thank you for posting in our forums!
You are right about the others category causing this and that is the recommended solution.
When a data value is below the othersCategoryThreshold, it is lumped into a general "Others" segment. This segment is rendered last, so the brush order doesn't consider China as a segment to apply a brush to and India gets the first color.
If you have any further questions or concerns with this, please let me know.