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 percentages

• stops: 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...