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
25
igDoughnutChart re-orders chart colours
posted

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:

<script>
$(function () {

var data = [
{ "CountryName": "China", "Pop1990": 10 },
{ "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>

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?