Sticking the charts together

In this section we are building a page with a mixture of charts. The main chart is displayed on the left-hand side panel and three mini charts are displayed on the right-hand side panel in top-down order. The layout is achieved by HTML div boxes and CSS styles.

The left-hand side chart is from the multicolored column chart example that we discussed previously. All the axes lines and labels are disabled in the mini charts.

The first mini chart from the top is a two-series line chart with dataLabels enabled only for the last point in each series, that is, the last point in the data array is a data object instead. The label color is set to the same color as its series. Then plotLine is inserted into the y axis at the 50 percent value mark. The following is a sample of one of the series configurations:

            pointStart: 2001,
            marker: {
                 enabled: false
            },
            data: [ 53.6, 52.7, 52.7, 51.9, 52.4, 
               ...