Search code examples
angularjschartshighcharts-ng

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.


Solution

  • 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/