Altering borders, shadows, and backgrounds

In this section, we will look at some of the Highcharts options that are available to modify borders, shadows, and backgrounds. Continuing with the previous example, we will add some more styling for the tooltip. However, instead of using CSS, this time we will utilize the options provided by Highcharts:

tooltip: {
  ...
  useHTML: true,
  backgroundColor: 'rgba(213, 226, 237, 0.6)',
  borderColor: '#eb454d',
  borderRadius: 8,
  borderWidth: 2,
  shadow: false
}

By default, backgroundColor is rgba(255, 255, 255, 0.85) and borderColor has the same color as the series. Since we have defined them explicitly, these values will override the default values.

The borderRadius and borderWidth elements define the radius and width of the border respectively and have values of 3 and 1 by default. We have disabled the shadow by setting it to false.

In addition to solid color backgrounds, Highcharts also support linear and radial gradients on a number of components...