Expanding colors with gradients

Highcharts not only supports single color values, but also allows complex color gradient definitions. 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 a 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 can use the previous stock market example with only the volume series, and redefine yAxis alternateGridColor as follows:

       yAxis: [{
            title: { text: 'Nasdaq index' },
            ....     

            alternateGridColor: {
                linearGradient: [ 10, 250, 400, 250 ],                       
                    stops: [ 
                           [ 0, 'red' ],
                        [ 0.2, 'orange' ],
   ...