Highcharts provides an easy way to zoom data interactively between two series of data. This feature is implemented as a separate module. To use the feature, users need to include the following JavaScript:

<script type="text/javascript" 
 src="http://code.highcharts.com/modules/drilldown.js"></script>

There are two ways to build an interactive drilldown chart: synchronous and asynchronous. The former method requires users to supply both top and detail levels of data in advance, and arrange both levels of data inside the configuration. Both levels of data are specified as standard Highcharts series configs, except that the zoom-in series is located inside the drilldown property. To join both levels, the top-level series must provide the option series.data[x].drilldown, with a matching name to the option drilldown.series.[y].id in the detail level.

Let's revisit the web browser statistic example and plot the data in a column chart. We will go...