Exploring PlotOptions

The plotOptions object is a wrapper object for config objects for each series type supported in Highcharts. These configurations have properties such as plotOptions.line.lineWidth, common to other series types, as well as other configurations such as plotOptions.pie.center that is only specific to the pie series type. Among the specific series, there is plotOptions.series, which is used for common plotting options shared by the whole series.

The preceding plotOptions object can form a chain of precedence between plotOptions.series, plotOptions.{series-type}, and the series configuration. For example, series[x].shadow (where series[x].type is 'pie') has a higher precedence than plotOptions.pie.shadow, which in turn has a higher precedence than plotOptions.series.shadow.

The purpose of this is that the chart is composed of multiple different series types. For example, in a chart with multiple series of columns and a single line series, the common properties between column and line can be defined in plotOptions.series.*, whereas plotOptions.column and plotOptions.line hold their own specific property values. Moreover, properties in plotOptions.{series-type}.* can be further overridden by the same series type specified in the series array.

The following is a reference for the configurations in precedence. The higher-level ones have lower precedence, which means that configurations defined in the lower level of the chain can override properties defined in the higher level of the chain. For the series array, the preference is valid if series[x].type or the default series type value is the same as the series type in plotOptions:

chart.type
    series[x].type

plotOptions.series.{seriesProperty}
    plotOptions.{series-type}.{seriesProperty}
        series[x].{seriesProperty}

plotOptions.points.events.*
       series[x].data[y].events.*

plotOptions.series.marker.*
       series[x].data[y].marker.*

The plotOptions object contains properties controlling how a series type is presented in the chart—for example inverted charts, series colors, stacked column charts, user interactions with the series, and so on. All these options will be covered in detail when we study each type of chart. Meanwhile, we will explore the concept of plotOptions with a monthly Nasdaq graph. The graph has five different series data types: open, close, high, low, and volume. Normally, this data is used for plotting daily stock charts (OHLCV). We compact them into a single chart for the purpose of demonstrating plotOptions.

The following is the chart configuration code for generating the preceding graph:

            chart: {
                renderTo: 'container',
                height: 250,
                spacingRight: 30
            },
            title: {
                text: 'Market Data: Nasdaq 100'
            },
            subtitle: {
                text: '2011 - 2012'
            },
            xAxis: {
                categories: [ 'Jan', 'Feb', 'Mar', 'Apr', 
                              'May', 'Jun', 'Jul', 'Aug', 
                              'Sep', 'Oct', 'Nov', 'Dec' ],
                labels: {
                    y: 17
                },
                gridLineDashStyle: 'dot',
                gridLineWidth: 1,
                lineWidth: 2,
                lineColor: '#92A8CD',
                tickWidth: 3,
                tickLength: 6,
                tickColor: '#92A8CD',
                minPadding: 0.04,
                offset: 1
            },
            yAxis: [{
                title: {
                    text: 'Nasdaq index'
                },
                min: 2000,               
                minorGridLineColor: '#D8D8D8',
                minorGridLineDashStyle: 'dashdot',
                gridLineColor: '#8AB8E6',
                alternateGridColor: {
                    linearGradient: {
                        x1: 0, y1: 1,
                        x2: 1, y2: 1
                    },
                    stops: [ [0, '#FAFCFF' ],                      
                             [0.5, '#F5FAFF'] ,
                             [0.8, '#E0F0FF'] ,
                             [1, '#D6EBFF'] ]
                },
                lineWidth: 2,
                lineColor: '#92A8CD',
                tickWidth: 3,
                tickLength: 6,
                tickColor: '#92A8CD'
            }, {
                title: {
                    text: 'Volume'
                },
                lineWidth: 2,
                lineColor: '#3D96AE',
                tickWidth: 3,
                tickLength: 6,
                tickColor: '#3D96AE',
                opposite: true
            }],
            credits: {
                enabled: false
            },
            plotOptions: {
                column: {
                    stacking: 'normal'
                },
                line: {
                    zIndex: 2,
                    marker: {
                        radius: 3,
                        lineColor: '#D9D9D9',
                        lineWidth: 1
                    },
                    dashStyle: 'ShortDot'
                }
            },
            series: [{
              name: 'Monthly High',
              // Use stacking column chart - values on 
              // top of monthly low to simulate monthly
              // high
              data: [ 98.31, 118.08, 142.55, 160.68, ... ],
              type: 'column',
              color: '#4572A7'
            }, {
              name: 'Monthly Low',
              data: [ 2237.73, 2285.44, 2217.43, ... ],
              type: 'column',
              color: '#AA4643'
            }, {
              name: 'Open (Start of the month)',
              data: [ 2238.66, 2298.37, 2359.78, ... ],
              color: '#89A54E'
            }, {
              name: 'Close (End of the month)',
              data: [ 2336.04, 2350.99, 2338.99, ... ],
              color: '#80699B'
            }, {
              name: 'Volume',
              data: [ 1630203800, 1944674700, 2121923300, ... ],
              yAxis: 1,
              type: 'column',
              stacking: null,
              color: '#3D96AE'
            }]
        }

Although the graph looks slightly complicated, we will go through the code step-by-step. First, there are two entries in the yAxis array: the first is for the Nasdaq index; the second y axis, displayed on the right-hand side (opposite: true), is for the volume trade. In the series array, the first and second series are specified as column series types (type: 'column'), which override the default series type 'line'. Then the stacking option is defined as 'normal' in plotOptions.column, which stacks the monthly high on top of the monthly low column (deep blue and black columns). Strictly speaking, the stacked column chart is used for displaying the ratio of data belonging to the same category. For the sake of demonstrating plotOptions, we used the stacked column chart to show the upper and lower ends of monthly trade. To do that, we take the difference between monthly high and monthly low and substitute the differences back into the monthly high series. So in the code, we can see that the data values in the monthly high series are much smaller than the monthly low.

The third and fourth series are the market open and market close index. Both take the default line series type and inherit options defined from plotOptions.line. The zIndex option is assigned to 2 to overlay both line series on top of the fifth volume series; otherwise, both lines are covered by the volume columns. The marker object configurations are to reduce the default data point size, as the whole graph is already compacted with columns and lines.

The last column series is the volume trade, and the stacking option in the series is manually set to null, which overrides the inherited option from plotOptions.column. This resets the series back to the non-stacking option, displaying as a separate column. Finally, the yAxis index option is set to align with the y axis of the volume series (yAxis: 1).