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 the coordinates of two points to determine the direction of the gradient. A value of 0 represents the top/left and a value of 1 represents the bottom/right corners. Since we have given the coordinates of (0, 0) and (1, 0), the gradient will start at the top-left corner and will end at the top-right corner of the chart. The same value for y coordinates of both the points implies that the gradient will be horizontal in direction.

If we were to start the gradient from the top-right corner and end at the bottom-left corner, then we would define the linearGradient object as follows:

linearGradient: {x1: 1, y1: 0, x2: 0, y2: 1}

This modification will result in the following chart:

We can change the background of tooltips and series columns to include a linear gradient, as shown in the following code:

tooltip: {
  ...
  backgroundColor: {
    linearGradient: {x1: 0, y1: 1, x2: 1, y2: 0},
    stops: [
      [0, '#cfd9e3'],
      [1, '#ffffff']
    ]
  }
},
series: [{
  ...
  color: {
    linearGradient: {x1: 0, y1: 0, x2: 1, y2: 0},
    stops: [
      [0, '#e5ac00'],
      [1, '#cc9900']
    ]
  }
}, {
  ...
  color: {
    linearGradient: {x1: 0, y1: 0, x2: 1, y2: 0},
    stops: [
      [0, '#cccccc'],
      [1, '#bfbfbf']
    ]
  }
}, {
  ...
  color: {
    linearGradient: {x1: 0, y1: 0, x2: 1, y2: 0},
    stops: [
      [0, '#e58e37'],
      [1, '#cd7f32']
    ]
  }
}]

This code gives the following result:

We can also define as many color stops as we need by specifying their proper positions within the gradient. The following code will include two more color stops at various positions in the gradient of the chart background:

chart: {
  type: 'column',
  backgroundColor: {
    linearGradient: {x1: 1, y1: 0, x2: 0, y2: 1},
    stops: [
      [0, '#ffffff'],
      [0.4, '#d5edd6'],
      [0.8, '#ede8d5'],
      [1, '#edd5d5']
    ]
  }
}

The following is the resultant gradient with four color stops:

Radial gradients have syntax similar to linear gradients. The difference is the radius of the gradient and the coordinates of its center point.

In the following code, we will modify the previous example and convert the linear gradient into a radial one:

backgroundColor: {
  radialGradient: {cx: 0, cy: 0.9, r: 1},
  stops: [
    [0, '#ffffff'],
    [0.4, '#d5edd6'],
    [0.8, '#ede8d5'],
    [1, '#edd5d5']
  ]
}

The cx and cy are the x and y coordinates of the center of the gradient relative to the shape to which the gradient is being applied. The r property defines the radius of the gradient relative to the shape. A value of 1 means that the gradient will have a radius equal to the size of the shape. In the preceding code, cx being 0 means that the center point of the gradient will be 0 percent from the left along the horizontal. The cy coordinate, with value 0.9, places the gradient's center point at 90 percent from the top. The following is the screenshot of the produced radial gradient:

When applying radial gradients to pie slices, the position of the gradient is determined relative to the whole circle instead of an individual pie chart. We can apply a radial gradient to a pie chart by passing it in the colors array.

Consider the example from the Chapter 5, Pie, Polar, and Spider Web Charts, plotting the MS Windows market share via a pie chart. The plotOptions.pie.colors array is modified as follows to include radial gradients to pie slices:

colors: [{
  radialGradient: {cx: 0.5, cy: 0.5, r: 0.5},
  stops: [
    [0, '#c92121'],
    [1, '#991818']
  ]
}, {
  radialGradient: {cx: 0.5, cy: 0.5, r: 0.5},
  stops: [
    [0, '#cc9621'],
    [1, '#997018']
  ]
}, {
  radialGradient: {cx: 0.5, cy: 0.5, r: 0.5},
  stops: [
    [0, '#65cc21'],
    [1, '#4c9918']
  ]
}, {
  radialGradient: {cx: 0.5, cy: 0.5, r: 0.5},
  stops: [
    [0, '#2185cc'],
    [1, '#186399']
  ]
}, {
  radialGradient: {cx: 0.5, cy: 0.5, r: 0.5},
  stops: [
    [0, '#216ecc'],
    [1, '#185299']
  ]
}]

Instead of passing solid colors in the colors array, we passed a bunch of object literals holding radial gradients. It will affect the pie chart as shown in the following screenshot:

As shown in the preceding screenshot, the radial gradient is starting from 50 percent of the chart, that is, from the middle of the chart. The modification of coordinates on an individual gradient will still position the gradient relative to the circle instead of the pie chart with that gradient.