Expanding colors with gradients
Highcharts not only supports single color values, but also allows complex color gradient definitions. Highcharts supports linear gradient, which is a directional color shading as well as radial (or circular) gradient. In this section, we will experiment with linear gradient, and the radial gradient will be explored in Chapter 6, Gauge, Polar, and Range Charts. In Highcharts, the color gradient is based on the SVG linear color gradient standard, which is composed of two sets of information, as follows:
linearGradient
: This gives a gradient direction for the color spectrum made up of two sets of x and y coordinates; ratio values are between 0 and 1, or in percentagesstops
: This gives a sequence of colors to be filled in the spectrum and their ratio positions within the gradient direction
We use the previous stock market example with only the Volume series, and redefine yAxis.alternateGridColor
as follows:
yAxis: [{ title: { text: 'Nasdaq index...