how to add highcharts-ng pie chart custom color for series?

Question

here is my chart object.

$scope.chartConfig = {
                        options: {
                            chart: {
                                type: 'pie',
                                plotBackgroundColor: null,
                                plotBorderWidth: null,
                                plotShadow: false

                            },
                            title: {
                                text: 'Status Counts in the Current Stage.'
                            },
                            plotOptions: {
                                pie: {
                                    dataLabels: {
                                        enabled: false
                                    },
                                    showInLegend: true
                                }
                            }
                        },
                        series: [{       
                            data: [
                                ['foo', 10],
                                ['bar', 90],
                                ['baz', 100]
                            ]
                        }],

                        loading: true
            };

in here i need to separate user defined colors for foo,bar,baz. how it is possible to do that in highchart-ng in angular.

Giordano · Accepted Answer · 2015-12-23T13:27:40.973

If you want a custom color for each user, you can modify your code like this:

$scope.chartConfig = {
                   options: {
                        chart: {
                            type: 'pie',
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            plotShadow: false

                        },
                        title: {
                            text: 'Status Counts in the Current Stage.'
                        },
                        plotOptions: {
                            pie: {
                                dataLabels: {
                                    enabled: false
                                },
                                showInLegend: true
                            }
                        }
                    },
                    series: [{       
                       data: [{
                                name: 'foo',
                                y: 56.33,
                                color: '#E94B3B'
                               }, {
                                name: 'bar',
                                y: 24.03,
                                color: '#8AD5E7',
                                sliced: true,
                                selected: true
                               }, {
                                name: 'baz',
                                color: '#F8C471',
                                y: 10.38
                            }]
                    }],

                    loading: true
        };

an example here:

http://jsfiddle.net/69kmnxgj/2/

Giordano i have tried this but when i add color to schemes to that array it wont change the color in chart. — Midhun Sudhakar, Dec 23 '15 at 09:28
i have just changed the object to this. data: [ ['foo', 10,'#E94B3B'], ['bar', 90,'#8AD5E7'], ['baz', 100,'#F8C471'] ] — Midhun Sudhakar, Dec 23 '15 at 09:32
try something like this: data: [ { name: 'foo', y: 10, color: '#E94B3B' }] — Giordano, Dec 23 '15 at 10:01
but when giving data format like this the chart wont generating in highcharts-ng — Midhun Sudhakar, Dec 23 '15 at 10:12
but highcharts-ng angular directive behaves slightly different than normal javascript plugin. that example you are reffered is javascript version. — Midhun Sudhakar, Dec 23 '15 at 12:48

how to add highcharts-ng pie chart custom color for series?

1 Answers1