Drilldown Functionality

Drilldown allows users to click on data points to navigate to more detailed information, creating a hierarchical data exploration experience.

Overview

The drilldown module enables multi-level data visualization where clicking on a point reveals more detailed data about that category.

Setup

First, include the drilldown module:

import Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';

Drilldown(Highcharts);

Basic Drilldown

Simple Column Drilldown

From the official demo (samples/highcharts/demo/column-drilldown/demo.js:4-315):

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  title: {
    text: 'Browser market shares. January, 2022'
  },
  subtitle: {
    text: 'Click the columns to view versions. Source: statcounter.com'
  },
  accessibility: {
    announceNewData: {
      enabled: true
    }
  },
  xAxis: {
    type: 'category'
  },
  yAxis: {
    title: {
      text: 'Total percent market share'
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true,
        format: '{point.y:.1f}%'
      }
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
    pointFormat: '<span style="color:{point.color}">{point.name}</span>: ' +
      '<b>{point.y:.2f}%</b> of total<br/>'
  },
  series: [{
    name: 'Browsers',
    colorByPoint: true,
    data: [
      {
        name: 'Chrome',
        y: 63.06,
        drilldown: 'Chrome'  // Links to drilldown series
      },
      {
        name: 'Safari',
        y: 19.84,
        drilldown: 'Safari'
      },
      {
        name: 'Firefox',
        y: 4.18,
        drilldown: 'Firefox'
      },
      {
        name: 'Edge',
        y: 4.12,
        drilldown: 'Edge'
      },
      {
        name: 'Opera',
        y: 2.33,
        drilldown: 'Opera'
      }
    ]
  }],
  drilldown: {
    series: [
      {
        name: 'Chrome',
        id: 'Chrome',
        data: [
          ['v65.0', 0.1],
          ['v64.0', 1.3],
          ['v63.0', 53.02],
          ['v62.0', 1.4],
          ['v61.0', 0.88]
        ]
      },
      {
        name: 'Safari',
        id: 'Safari',
        data: [
          ['v11.0', 3.39],
          ['v10.1', 0.96],
          ['v10.0', 0.36],
          ['v9.1', 0.54]
        ]
      },
      {
        name: 'Firefox',
        id: 'Firefox',
        data: [
          ['v58.0', 1.02],
          ['v57.0', 7.36],
          ['v56.0', 0.35],
          ['v55.0', 0.11]
        ]
      }
    ]
  }
});

Drilldown Configuration

Breadcrumbs

Breadcrumbs help users navigate back through drilldown levels:

{
  drilldown: {
    breadcrumbs: {
      position: {
        align: 'right',
        verticalAlign: 'top',
        x: 0,
        y: 0
      },
      showFullPath: true,
      format: '{level.name}',
      buttonTheme: {
        fill: '#f7f7f7',
        padding: 8,
        stroke: '#cccccc',
        'stroke-width': 1,
        r: 3,
        style: {
          color: '#333333',
          fontWeight: 'normal'
        },
        states: {
          hover: {
            fill: '#e6e6e6'
          }
        }
      },
      floating: false,
      relativeTo: 'plotBox'
    }
  }
}

Active Data Label Styling

Customize how drillable points are styled:

{
  drilldown: {
    activeAxisLabelStyle: {
      color: '#F0F0F3',
      textDecoration: 'none',
      cursor: 'pointer'
    },
    activeDataLabelStyle: {
      color: '#F0F0F3',
      textDecoration: 'none',
      cursor: 'pointer'
    }
  }
}

Drill Up Button

Customize the button that appears to navigate back:

{
  drilldown: {
    drillUpButton: {
      relativeTo: 'plotBox',
      position: {
        align: 'right',
        verticalAlign: 'top',
        x: -10,
        y: 10
      },
      theme: {
        fill: 'white',
        stroke: '#cccccc',
        r: 3,
        states: {
          hover: {
            fill: '#e6e6e6'
          }
        }
      }
    }
  }
}

Advanced Drilldown Features

Multi-Level Drilldown

Create multiple levels of drilling:

{
  series: [{
    name: 'Continents',
    data: [
      { name: 'Asia', y: 4641, drilldown: 'asia' },
      { name: 'Europe', y: 747, drilldown: 'europe' }
    ]
  }],
  drilldown: {
    series: [
      {
        id: 'asia',
        name: 'Asian Countries',
        data: [
          { name: 'China', y: 1444, drilldown: 'china' },
          { name: 'India', y: 1393, drilldown: 'india' }
        ]
      },
      {
        id: 'china',
        name: 'Chinese Cities',
        data: [
          ['Shanghai', 27],
          ['Beijing', 21],
          ['Guangzhou', 15]
        ]
      }
    ]
  }
}

Async Drilldown

Load drilldown data dynamically from an API (from ts/Extensions/Drilldown/Drilldown.ts:134-158):

const chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      drilldown: function (e) {
        if (!e.seriesOptions) {
          const chart = this;
          
          // Show loading message
          chart.showLoading('Loading drilldown data...');
          
          // Fetch data from API
          fetch(`/api/drilldown/${e.point.drilldown}`)
            .then(response => response.json())
            .then(data => {
              chart.hideLoading();
              
              // Add the series
              chart.addSeriesAsDrilldown(e.point, {
                name: e.point.name,
                data: data
              });
            })
            .catch(error => {
              chart.hideLoading();
              console.error('Error loading drilldown:', error);
            });
        }
      }
    }
  },
  series: [{
    name: 'Categories',
    data: [
      { name: 'Category A', y: 100, drilldown: 'cat-a' },
      { name: 'Category B', y: 80, drilldown: 'cat-b' }
    ]
  }]
});

Programmatic Drilldown

Trigger drilldown programmatically:

Point Drilldown

Drill down on a specific point:

// Get the point
const point = chart.series[0].points[2];

// Trigger drilldown
point.doDrilldown();

Axis Drilldown

Drill down to a category on an axis:

// Drilldown on category at index 1
chart.xAxis[0].drilldownCategory(1);

Drill Up

Navigate back programmatically:

// Go back one level
chart.drillUp();

Drilldown Events

Handle drilldown interactions with events:

{
  chart: {
    events: {
      drilldown: function (e) {
        console.log('Drilling down to:', e.point.name);
        console.log('Drilldown level:', this.drilldownLevels?.length || 0);
        
        // Track analytics
        trackEvent('drilldown', {
          category: e.point.name,
          level: this.drilldownLevels?.length || 0
        });
      },
      drillup: function (e) {
        console.log('Drilling up from:', e.seriesOptions.name);
      },
      drillupall: function () {
        console.log('Returned to top level');
      }
    }
  }
}

Drilldown with Different Chart Types

Pie Chart Drilldown

{
  chart: {
    type: 'pie'
  },
  plotOptions: {
    pie: {
      allowPointSelect: true,
      cursor: 'pointer',
      dataLabels: {
        enabled: true,
        format: '{point.name}: {point.y:.1f}%'
      }
    }
  },
  series: [{
    name: 'Market Share',
    colorByPoint: true,
    data: [
      { name: 'Desktop', y: 55.02, drilldown: 'desktop' },
      { name: 'Mobile', y: 44.98, drilldown: 'mobile' }
    ]
  }],
  drilldown: {
    series: [
      {
        id: 'desktop',
        name: 'Desktop OS',
        data: [
          ['Windows', 47.56],
          ['Mac', 7.23],
          ['Linux', 0.23]
        ]
      },
      {
        id: 'mobile',
        name: 'Mobile OS',
        data: [
          ['Android', 25.43],
          ['iOS', 19.32],
          ['Other', 0.23]
        ]
      }
    ]
  }
}

Map Drilldown

{
  chart: {
    type: 'map'
  },
  series: [{
    data: [
      { code: 'US', value: 331, drilldown: 'us-states' },
      { code: 'CN', value: 1444, drilldown: 'china-provinces' }
    ]
  }],
  drilldown: {
    series: [
      {
        id: 'us-states',
        mapData: Highcharts.maps['countries/us/us-all'],
        data: [
          ['us-ca', 39],
          ['us-tx', 29],
          ['us-fl', 21]
        ]
      }
    ]
  }
}

Styling Drilldown

Animation

{
  drilldown: {
    animation: {
      duration: 500,
      easing: 'easeOutBounce'
    }
  }
}

Series-Specific Styling

{
  drilldown: {
    series: [
      {
        id: 'chrome-versions',
        name: 'Chrome Versions',
        // Apply different chart type
        type: 'bar',
        // Custom colors
        color: '#4CAF50',
        // Custom options
        borderRadius: 5,
        data: [/* ... */]
      }
    ]
  }
}

Accessibility

Ensure drilldown is accessible:

{
  accessibility: {
    announceNewData: {
      enabled: true,
      minAnnounceInterval: 1000,
      announcementFormatter: function (allSeries, newSeries, newPoint) {
        if (newSeries) {
          return 'Drilldown to ' + newSeries.name + '. ' + 
                 newSeries.points.length + ' data points.';
        }
        return false;
      }
    },
    point: {
      descriptionFormatter: function (point) {
        if (point.drilldown) {
          return point.name + ', ' + point.y + '. ' +
            'Click to drill down to more details.';
        }
        return point.name + ', ' + point.y + '.';
      }
    }
  }
}

Best Practices

Drilldown UX Tips

Always show breadcrumbs or a drill-up button
Provide visual feedback that points are clickable (cursor, hover states)
Use consistent chart types across drill levels when possible
Include instructions in subtitle or caption
Limit drill depth to 3-4 levels for usability
Pre-load common drilldown data to reduce latency

Common Pitfalls

Drilldown series IDs must match the drilldown property exactly
Async drilldown requires checking if (!e.seriesOptions)
Don’t forget to include the drilldown module
Memory usage can grow with many drill levels
Test on touch devices - ensure tap targets are large enough

Complete Example with All Features

import Highcharts from 'highcharts';
import Drilldown from 'highcharts/modules/drilldown';

Drilldown(Highcharts);

Highcharts.chart('container', {
  chart: {
    type: 'column',
    events: {
      drilldown: function (e) {
        console.log('Drilling to:', e.point.name);
      },
      drillup: function () {
        console.log('Drilling up');
      }
    }
  },
  title: {
    text: 'Sales by Category'
  },
  subtitle: {
    text: 'Click columns to drill down'
  },
  accessibility: {
    announceNewData: {
      enabled: true
    }
  },
  xAxis: {
    type: 'category'
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      borderWidth: 0,
      dataLabels: {
        enabled: true
      }
    }
  },
  series: [{
    name: 'Categories',
    colorByPoint: true,
    data: [
      { name: 'Electronics', y: 5000, drilldown: 'electronics' },
      { name: 'Clothing', y: 3000, drilldown: 'clothing' },
      { name: 'Food', y: 2000, drilldown: 'food' }
    ]
  }],
  drilldown: {
    breadcrumbs: {
      position: {
        align: 'right'
      }
    },
    series: [
      {
        id: 'electronics',
        name: 'Electronics',
        data: [
          ['Phones', 2000],
          ['Laptops', 1800],
          ['Tablets', 1200]
        ]
      },
      {
        id: 'clothing',
        name: 'Clothing',
        data: [
          ['Men', 1500],
          ['Women', 1000],
          ['Kids', 500]
        ]
      },
      {
        id: 'food',
        name: 'Food',
        data: [
          ['Produce', 800],
          ['Meat', 700],
          ['Dairy', 500]
        ]
      }
    ]
  }
});

Getting Started

Core Concepts

Chart Types

Features

Advanced

Products

Drilldown Functionality

Drilldown Functionality

Overview

Setup

Basic Drilldown

Simple Column Drilldown

Drilldown Configuration

Active Data Label Styling

Drill Up Button

Advanced Drilldown Features

Multi-Level Drilldown

Async Drilldown

Programmatic Drilldown

Drilldown Events

Drilldown with Different Chart Types

Pie Chart Drilldown

Map Drilldown

Styling Drilldown

Animation

Series-Specific Styling

Accessibility

Best Practices

Complete Example with All Features

Getting Started

Core Concepts

Chart Types

Features

Advanced

Products

Documentation Index

​Drilldown Functionality

​Overview

​Setup

​Basic Drilldown

​Simple Column Drilldown

​Drilldown Configuration

​Breadcrumbs

​Active Data Label Styling

​Drill Up Button

​Advanced Drilldown Features

​Multi-Level Drilldown

​Async Drilldown

​Programmatic Drilldown

​Drilldown Events

​Drilldown with Different Chart Types

​Pie Chart Drilldown

​Map Drilldown

​Styling Drilldown

​Animation

​Series-Specific Styling

​Accessibility

​Best Practices

​Complete Example with All Features

​Related Resources

Drilldown Functionality

Overview

Setup

Basic Drilldown

Simple Column Drilldown

Drilldown Configuration

Breadcrumbs

Active Data Label Styling

Drill Up Button

Advanced Drilldown Features

Multi-Level Drilldown

Async Drilldown

Programmatic Drilldown

Drilldown Events

Drilldown with Different Chart Types

Pie Chart Drilldown

Map Drilldown

Styling Drilldown

Animation

Series-Specific Styling

Accessibility

Best Practices

Complete Example with All Features

Related Resources