Plotting range charts with market index data

Range charts are really line and column type charts presenting a series of data in range. The set of range type series can be arearange, areasplinerange, and columnrange. These series expect an array of three data points, x, y min, y max, in the data option or array of y min, y max if xAxis.cateogries has already been specified.

Let's use our past examples to see whether we can make an improvement to the range charts. Back in Chapter 2, Highcharts Configurations, we have a five-series graph showing the monthly data of Nasdaq 100—open, close, high, low, and volume, as shown in the following screenshot:

With the new range series, we sort the series data and merge the Monthly High and Monthly Low columns into a column range series and the Open and Low columns into an area spline range series, as follows:

            series: [{
              type: 'columnrange',
              name: 'High & Low',
              data: [ [ 2237.73, 2336.04 ], 
   ...