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