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.
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 gradient on the chart background:
chart: { ... backgroundColor: { linearGradient: {x1: 0, y1: 0, x2: 1, y2: 0}, stops: [ [0, '#ffffff'], [1, '#ede8d5'] ] } }
The linearGradient
object holds an object literal containing...