Question

I am trying to create a column chart that renders a linear gradient which is lighter in the center of the column (as if it were a cylinder). I can’t seem to figure out if it’s possible to get highcharts to create a linear gradient with more than one stop.

Here is my code:

{
        linearGradient: [0, 0, 100, 0],
        stops: [[0, '#12a2e9'], [1, '#ffffff'],[0, '#ffffff'], [1, '#12a2e9']]
}

Answer 1

I think if the stops were like this it would work:

stops: [[0, ‘#12a2e9’], [0.5, ‘#ffffff’],[1, ‘#12a2e9’]]

The first number in the stops are percents. This might be useful:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors#A_createLinearGradient_example