Add Gradient Pie Chart functionality to Highcharts-ng

0
votes

I am using Highcharts-ng in an app. Everything is working fine. I've successfully added an additional "drilldown" attribute to the javascript file - great! But how do I add the code for a pie chart gradient fill?

$scope.chartConfig.options.colors = ["#55BF3B", "#DF5353", "#DDDF0D", "#7798BF"];

Highcharts.map($scope.chartConfig.options.colors, function (color) {
    return {
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [
            [0, color],
            [1, Highcharts.Color(color).brighten(-0.3).get('rgb')] // darken
        ]
    };
});

My difficulty is the fact that it uses "Highcharts.map" and "Highcharts.Color"?

1
chartshighchartsgradientpie-charthighcharts-ng

1 Answers

2
votes

Highcharts.map is nothing more than simple for which can be replaced by for(var i = 0; i < colors.length; i++) { ... }.

Highcharts.Color create color object. You don't need to use that, just create two arrays for colors, one for starting colors, one for end colors:

var startColors = ["#55BF3B", "#DF5353", "#DDDF0D", "#7798BF"];
var endColors = ["#7798BF", "#DDDF0D", "#DF5353", '#55BF3B' ];

Then loop over them to set colors:

$scope.chartConfig.options.colors[0] = {
    radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
    stops: [
        [0, startColors[0]],
        [1, endColors[0]] 
    ]
}