O'Reilly logo

Highcharts Essentials by Bilal Shahid

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Gradient fill types

Currently, the background of the chart is a solid white color. We can have a gradient of either linear or radial type as the background of the chart. Gradients in Highcharts have syntax similar to that of gradients in SVG.

In this section, we will apply gradient fill to various chart components, including the chart itself, series columns, and tooltips.

Linear gradients

To apply a linear gradient on any chart component, we need to define two objects inside the backgroundColor property. These two objects are linearGradient and stops. The linearGradient object defines the direction and shape of the gradient, while stops defines color transitions and their positions within the gradient.

Consider the following code to define a linear ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required