CODEWITHSUNDEEP
javascriptcolorshighchartsradial-gradients
Michal S
Michal S

Reputation: 1113

HighCharts: How to combine custom colors with gradient

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...

Upvotes: 2

Views: 5816

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

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
        ]
    };
})

Upvotes: 7

Related Questions