Skip to content

Highcharts Feature: Drilldown

Alexander Nedomansky edited this page Mar 27, 2018 · 1 revision

Supported by:


The term "drilldown" actually defines the act of moving from a general chart to a more specific chart that shows more detailed information than the one before. Here, it simply means clicking on a chart with the result that the chart changes its content. Technically, it means that the Options object of the chart is exchanged with a different one when the user clicks on a certain point of the chart.

For each point in a chart, drilldown can be activated separately, by adding a DrilldownPoint instead of a normal Point to a series:

// define the options to appear initially
Options mainOptions = ...;

// define the options to appear when the point is clicked
Options drilldownOptions = ...;

// define the point that should trigger the drilldown on click
mainOptions.addSeries(new PointSeries()
  . addPoint(new DrilldownPoint(options, drilldownOptions)
    .setY(5));

}}}

Please note that if you define many DrilldownPoints each pointing to different drilldown-Options in a single chart each drilldown options will be rendered into the page as separate JSON object. That means that the drilldown feature does not scale endlessly!