Sticking the charts together

In this section, we are building a page with a mixture of charts. The main chart is displayed in the left-hand side panel and three mini charts are displayed in 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 axis 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 for the last point in each series only: 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 ...

Get Learning Highcharts 4 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.