CODEWITHSUNDEEP
angularjschartshighcharts-ng
Midhun Sudhakar
Midhun Sudhakar

Reputation: 1318

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

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.

Upvotes: 2

Views: 3365

Answers (1)

Giordano
Giordano

Reputation: 5570

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/

Upvotes: 3

Related Questions