Exploring PlotOptions

plotOptions is a wrapper object for config objects for each series type, which are area, areaspline, bar, column, pie, scatter, spline gauge, and range. These configurations have properties such as plotOptions.line.lineWidth, common to other series types, as well as other configurations such as plotOptions.pie.center, which 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 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 the chart composed of multiple different series types. For example, a chart with multiple series of columns and a single line series, so 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 configurations defined in a lower chain can override the defined properties in the higher level of the chain. For the series array, preference is valid if series[x].type or the default series type value is the same as the series type in plotOptions.

chart.defaultSeriesType or 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.*

plotOptions contains properties controlling how a series type is presented in the chart; for example, inverted charts, series colors, stacked column charts, user interactions to 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—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'
            }, {
              name: 'Monthly Low',
              data: [ 2237.73, 2285.44, 2217.43, ... ],
              type: 'column'
            }, {
              name: 'Open (Start of the month)',
              data: [ 2238.66, 2298.37, 2359.78, ... ]
            }, {
              name: 'Close (End of the month)',
              data: [ 2336.04, 2350.99, 2338.99, ... ]
            }, {
              name: 'Volume',
              data: [ 1630203800, 1944674700, 2121923300, ... ],
              yAxis: 1,
              type: 'column',
              stacking: null
            }]
        }

Although the graph looks slightly complicated, we will go through the code step-by-step to make it clearer. First, there are two entries in the yAxis array: the first one 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 (blue and red 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 use the stacked column chart to show the upper and lower end 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. Hence, 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 for overlaying 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, that is, displaying as a separate column. Finally, the yAxis index option is set to align with the y axis of the Volume series (yAxis: 1).