For some while now Im playing with coloring of my pie chart... And either I got my custom colors without gradient, or default colors with gradient... My colors are stored in php field, which I want to load like colors: <?echo $myColors;?> . Actual state of my code is like this (it shows default colors with gradient):

colors: Highcharts.map(Highcharts.getOptions().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
        ]
    };
})

How should I edit it so it would show my own colors in simple way? Also I didn´t find what is "stops" option for...

For some while now Im playing with coloring of my pie chart... And either I got my custom colors without gradient, or default colors with gradient... My colors are stored in php field, which I want to load like colors: <?echo $myColors;?> . Actual state of my code is like this (it shows default colors with gradient):

colors: Highcharts.map(Highcharts.getOptions().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
        ]
    };
})

How should I edit it so it would show my own colors in simple way? Also I didn´t find what is "stops" option for...

• javascript
• colors
• highcharts
• radial-gradients

1 Answer 1

Use your colors in map instead of Highcharts built-in ones:

colors: Highcharts.map(<?echo $myColors;?>, 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
        ]
    };
})