drilldown

Configuration Structure

drilldown: {
  enabled: boolean,
  series: ApexDrilldownSeries[],
    id: string | number,
    name: string,
    data: any[],
    series: ApexAxisChartSeries,
    chart: Pick,
    plotOptions: ApexPlotOptions,
      line: { ... },
        isSlopeChart: boolean,
        colors: { ... },
          threshold: number,
          colorAboveThreshold: string,
          colorBelowThreshold: string,
      area: { ... },
        fillTo: 'origin' | 'end',
      bar: { ... },
        horizontal: boolean,
        columnWidth: string | number,
        barHeight: string | number,
        distributed: boolean,
        borderRadius: number,
        borderRadiusApplication: 'around' | 'end',
        borderRadiusWhenStacked: 'all' | 'last',
        hideZeroBarsWhenGrouped: boolean,
        rangeBarOverlap: boolean,
        rangeBarGroupRows: boolean,
        isDumbbell: boolean,
        dumbbellColors: string[][],
        isFunnel: boolean,
        isFunnel3d: boolean,
        colors: { ... },
          ranges: Array,
            from: number,
            to: number,
            color: string,
          backgroundBarColors: string[],
          backgroundBarOpacity: number,
          backgroundBarRadius: number,
        dataLabels: { ... },
          maxItems: number,
          hideOverflowingLabels: boolean,
          position: string,
          orientation: 'horizontal' | 'vertical',
          total: { ... },
            enabled: boolean,
            formatter: Function,
            offsetX: number,
            offsetY: number,
            style: { ... },
              color: string,
              fontSize: string,
              fontFamily: string,
              fontWeight: number | string,
      bubble: { ... },
        zScaling: boolean,
        minBubbleRadius: number,
        maxBubbleRadius: number,
      scatter: { ... },
        jitter: { ... },
          enabled: boolean,
          x: number,
          y: number,
          distributed: boolean,
          maxPoints: number,
      candlestick: { ... },
        type: string,
        colors: { ... },
          upward: string | string[],
          downward: string | string[],
        wick: { ... },
          useFillColor: boolean,
      boxPlot: { ... },
        colors: { ... },
          upper: string | string[],
          lower: string | string[],
        points: { ... },
          show: boolean,
          shape: 'circle' | 'square',
          size: number,
          jitter: number,
          maxPoints: number,
          opacity: number,
          fillColor: string,
          strokeColor: string,
          strokeWidth: number,
          colorScale: { ... },
            colors: string[],
            min: number,
            max: number,
            steps: number,
      violin: { ... },
        bandwidthScale: number,
        normalize: 'individual' | 'group',
        points: { ... },
          show: boolean,
          shape: 'circle' | 'square',
          size: number,
          jitter: number,
          constrainToViolin: boolean,
          maxPoints: number,
          opacity: number,
          fillColor: string,
          strokeColor: string,
          strokeWidth: number,
          colorScale: { ... },
            colors: string[],
            min: number,
            max: number,
            steps: number,
      heatmap: { ... },
        radius: number,
        enableShades: boolean,
        shadeIntensity: number,
        reverseNegativeShade: boolean,
        distributed: boolean,
        useFillColorAsStroke: boolean,
        colorScale: { ... },
          ranges: Array,
            from: number,
            to: number,
            color: string,
            foreColor: string,
            name: string,
          inverse: boolean,
          min: number,
          max: number,
          gradientLegend: { ... },
            enabled: boolean,
            width: number | string,
            height: number | string,
            thickness: number,
            align: 'start' | 'center' | 'end',
            stops: number,
            showLabels: boolean,
            showHoverValue: boolean,
            labelStyle: { ... },
              fontSize: string,
              fontFamily: string,
              colors: string,
            arrow: { ... },
              size: number,
              color: string,
            formatter: Function,
      funnel: { ... },
        shape: 'rectangle' | 'trapezoid',
        lastShape: 'flat' | 'taper',
      treemap: { ... },
        enableShades: boolean,
        shadeIntensity: number,
        distributed: boolean,
        reverseNegativeShade: boolean,
        useFillColorAsStroke: boolean,
        dataLabels: { ... },
          format: 'scale' | 'truncate',
        borderRadius: number,
        colorScale: { ... },
          inverse: boolean,
          ranges: Array,
            from: number,
            to: number,
            color: string,
            foreColor: string,
            name: string,
          min: number,
          max: number,
        seriesTitle: { ... },
          show: boolean,
          offsetY: number,
          offsetX: number,
          borderColor: string,
          borderWidth: number,
          borderRadius: number,
          style: { ... },
            background: string,
            color: string,
            fontSize: string,
            fontFamily: string,
            fontWeight: number | string,
            cssClass: string,
            padding: { ... },
              left: number,
              right: number,
              top: number,
              bottom: number,
      pie: { ... },
        startAngle: number,
        endAngle: number,
        customScale: number,
        offsetX: number,
        offsetY: number,
        expandOnClick: boolean,
        dataLabels: { ... },
          offset: number,
          minAngleToShowLabel: number,
          external: { ... },
            show: boolean,
            offsetX: number,
            offsetY: number,
            fontSize: string,
            fontFamily: string,
            fontWeight: string | number,
            color: string,
            formatter: Function,
            connector: { ... },
              show: boolean,
              width: number,
              color: string,
              length: number,
              gap: number,
        donut: { ... },
          size: string,
          background: string,
          labels: { ... },
            show: boolean,
            name: { ... },
              show: boolean,
              fontSize: string,
              fontFamily: string,
              fontWeight: string | number,
              color: string,
              offsetY: number,
              formatter: Function,
            value: { ... },
              show: boolean,
              fontSize: string,
              fontFamily: string,
              fontWeight: string | number,
              color: string,
              offsetY: number,
              formatter: Function,
            total: { ... },
              show: boolean,
              showAlways: boolean,
              fontFamily: string,
              fontWeight: string | number,
              fontSize: string,
              label: string,
              color: string,
              formatter: Function,
      polarArea: { ... },
        rings: { ... },
          strokeWidth: number,
          strokeColor: string,
        spokes: { ... },
          strokeWidth: number,
          connectorColors: string | string[],
      radar: { ... },
        size: number,
        offsetX: number,
        offsetY: number,
        polygons: { ... },
          strokeColors: string | string[],
          strokeWidth: Array,
          connectorColors: string | string[],
          fill: { ... },
            colors: string[],
      radialBar: { ... },
        inverseOrder: boolean,
        startAngle: number,
        endAngle: number,
        offsetX: number,
        offsetY: number,
        shape: 'arc' | 'needle',
        min: number,
        max: number,
        bands: Array,
        bandsStyle: { ... },
          strokeWidth: string,
          gap: number,
          hideTrackWhenPresent: boolean,
          linecap: 'butt' | 'round' | 'square',
        ticks: { ... },
          show: boolean,
          major: { ... },
            count: number,
            length: number,
            width: number,
            color: string,
            placement: 'inside' | 'outside',
          minor: { ... },
            count: number,
            length: number,
            width: number,
            color: string,
            placement: 'inside' | 'outside',
          labels: { ... },
            show: boolean,
            offset: number,
            fontSize: string,
            fontFamily: string,
            fontWeight: string | number,
            color: string,
            formatter: Function,
        needle: { ... },
          color: string,
          length: string | number,
          baseWidth: number,
          tipWidth: number,
          showValueArc: boolean,
          offsetY: number,
          animation: { ... },
            enabled: boolean,
            duration: number,
            easing: string,
        hollow: { ... },
          margin: number,
          size: string,
          background: string,
          image: string,
          imageWidth: number,
          imageHeight: number,
          imageOffsetX: number,
          imageOffsetY: number,
          imageClipped: boolean,
          position: 'front' | 'back',
          stroke: string,
          strokeWidth: number,
          strokeDasharray: string | number,
          dropShadow: ApexDropShadow,
            enabled: boolean,
            top: number,
            left: number,
            blur: number,
            opacity: number,
            color: string | string[],
        track: { ... },
          show: boolean,
          startAngle: number,
          endAngle: number,
          background: string | string[],
          strokeWidth: string,
          opacity: number,
          margin: number,
          dropShadow: ApexDropShadow,
            enabled: boolean,
            top: number,
            left: number,
            blur: number,
            opacity: number,
            color: string | string[],
        dataLabels: { ... },
          show: boolean,
          name: { ... },
            show: boolean,
            fontFamily: string,
            fontWeight: string | number,
            fontSize: string,
            color: string,
            offsetY: number,
            formatter: Function,
          value: { ... },
            show: boolean,
            fontFamily: string,
            fontSize: string,
            fontWeight: string | number,
            color: string,
            offsetY: number,
            formatter: Function,
          total: { ... },
            show: boolean,
            label: string,
            color: string,
            fontFamily: string,
            fontWeight: string | number,
            fontSize: string,
            formatter: Function,
        barLabels: { ... },
          enabled: boolean,
          offsetX: number,
          offsetY: number,
          useSeriesColors: boolean,
          fontFamily: string,
          fontWeight: string | number,
          fontSize: string,
          formatter: Function,
          onClick: Function,
    xaxis: ApexXAxis,
      type: 'category' | 'datetime' | ...,
      categories: Array<string | number> | ...,
      overwriteCategories: number[] | string[] | ...,
      offsetX: number,
      offsetY: number,
      sorted: boolean,
      labels: { ... },
        show: boolean,
        rotate: number,
        rotateAlways: boolean,
        hideOverlappingLabels: boolean,
        showDuplicates: boolean,
        trim: boolean,
        minHeight: number,
        maxHeight: number,
        style: { ... },
          colors: string | string[],
          fontSize: string,
          fontFamily: string,
          fontWeight: string | number,
          cssClass: string,
        offsetX: number,
        offsetY: number,
        format: string,
        formatter: Function,
        datetimeUTC: boolean,
        datetimeFormatter: { ... },
          year: string,
          month: string,
          day: string,
          hour: string,
          minute: string,
          second: string,
      group: { ... },
        groups: Array,
          title: string,
          cols: number,
        style: { ... },
          colors: string | string[],
          fontSize: string,
          fontFamily: string,
          fontWeight: string | number,
          cssClass: string,
      axisBorder: { ... },
        show: boolean,
        color: string,
        height: number,
        offsetX: number,
        offsetY: number,
      axisTicks: { ... },
        show: boolean,
        borderType: 'solid' | 'dotted' | 'dashed',
        color: string,
        height: number,
        offsetX: number,
        offsetY: number,
      tickPlacement: string,
      tickAmount: number | 'dataPoints',
      stepSize: number,
      min: number,
      max: number,
      range: number,
      floating: boolean,
      decimalsInFloat: number,
      position: string,
      title: { ... },
        text: string,
        offsetX: number,
        offsetY: number,
        style: { ... },
          color: string,
          fontFamily: string,
          fontWeight: string | number,
          fontSize: string,
          cssClass: string,
      crosshairs: { ... },
        show: boolean,
        width: number | string,
        position: string,
        opacity: number,
        stroke: { ... },
          color: string,
          width: number,
          dashArray: number,
        fill: { ... },
          type: string,
          color: string,
          gradient: { ... },
            colorFrom: string,
            colorTo: string,
            stops: number[],
            opacityFrom: number,
            opacityTo: number,
        dropShadow: ApexDropShadow,
          enabled: boolean,
          top: number,
          left: number,
          blur: number,
          opacity: number,
          color: string | string[],
      tooltip: { ... },
        enabled: boolean,
        offsetY: number,
        formatter: Function,
        style: { ... },
          fontSize: string,
          fontFamily: string,
    yaxis: Array,
    colors: Array,
    fill: ApexFill,
      colors: string[],
      opacity: number | number[],
      type: string | string[],
      gradient: { ... },
        shade: string,
        type: string,
        shadeIntensity: number,
        gradientToColors: string[],
        inverseColors: boolean,
        opacityFrom: number | number[],
        opacityTo: number | number[],
        stops: number[],
        colorStops: Array,
      image: { ... },
        src: string | string[],
        width: number,
        height: number,
      pattern: { ... },
        style: string | string[],
        width: number,
        height: number,
        strokeWidth: number,
    legend: ApexLegend,
      show: boolean,
      showForSingleSeries: boolean,
      showForNullSeries: boolean,
      showForZeroSeries: boolean,
      floating: boolean,
      inverseOrder: boolean,
      position: 'top' | 'right' | ...,
      horizontalAlign: 'left' | 'center' | 'right',
      fontSize: string,
      fontFamily: string,
      fontWeight: string | number,
      width: number,
      height: number,
      offsetX: number,
      offsetY: number,
      formatter: Function,
      tooltipHoverFormatter: Function,
      customLegendItems: string[],
      clusterGroupedSeries: boolean,
      clusterGroupedSeriesOrientation: 'vertical' | 'horizontal',
      labels: { ... },
        colors: string | string[],
        useSeriesColors: boolean,
      markers: { ... },
        size: number,
        strokeWidth: number,
        fillColors: string[],
        shape: ApexMarkerShape,
        offsetX: number,
        offsetY: number,
        customHTML: Function,
        onClick: Function,
      itemMargin: { ... },
        horizontal: number,
        vertical: number,
      onItemClick: { ... },
        toggleDataSeries: boolean,
      onItemHover: { ... },
        highlightDataSeries: boolean,
  breadcrumb: false | object,
  animation: { ... },
    enabled: boolean,
    zoomFromPoint: boolean,
    speed: number,
  onDrillDown: Function,
}

Opt-in navigation that lets a reader click a data point to open a child level, with a breadcrumb trail and back navigation. Requires the tree-shakeable Drilldown feature (import 'apexcharts/features/drilldown'; already included in the full build). Works with bar, column, pie, donut, treemap, and heatmap. See the Drilldown guide for a walkthrough.

enabled

Default: false

Master switch. When false the feature stays inert even if it was imported.

series

Default: []

The child levels, each referenced by a data point's drilldown id. A level is an object shaped like this:

{
  id: 'mobile',            // matches a point's `drilldown` id
  name: 'Mobile by OS',    // breadcrumb label and single-series name
  data: [                  // single-series data (use this OR `series`)
    { x: 'iOS', y: 30, drilldown: 'mobile-ios' },
    { x: 'Android', y: 23 }
  ]
}

A level may also override the presentation applied while it is shown: chart (type, stacked, stackType), xaxis, yaxis, colors, plotOptions, fill, and legend.

id

drilldown.series.id

Unique id referenced by a data point's drilldown field.

name

drilldown.series.name

Display name used by the breadcrumb and as the single-series child series name.

data

drilldown.series.data

Child data points for a single-series level. Use this or series, not both.

series

drilldown.series.series

Full multi-series array for a grouped or stacked child level. Use this or data, not both.

breadcrumb

The trail from the root level to the current one, with back navigation to any ancestor. Set breadcrumb: false to hide it and drive navigation yourself.

show

Show the breadcrumb trail.

position

Where the breadcrumb sits.

Available Options:

  • top-left
  • top-right

separator

String placed between breadcrumb levels.

rootLabel

Label for the top (root) level in the trail.

offsetX

Horizontal shift of the breadcrumb.

offsetY

Vertical shift of the breadcrumb.

formatter

Customise each breadcrumb label. Receives (label, { index, depth }) and returns the string to display.

animation

Controls the drill transition.

enabled

drilldown.animation.enabled
Default: true

Gate whether the drill transition animates at all.

zoomFromPoint

drilldown.animation.zoomFromPoint
Default: false

Anchor the transition at the clicked point so the child unfolds outward from it (and settles back on drill-up) instead of re-rendering. A gentle scale layered on the SVG.

speed

drilldown.animation.speed
Default: 260

Base transition duration in milliseconds, used only when zoomFromPoint is true.

onDrillDown

Async resolver called when a drillable point has no matching entry in series. Receives { point, seriesIndex, dataPointIndex } and returns (or resolves to) the child level to open, so levels can be fetched on demand. If it throws or rejects, the drillDownError event fires and the chart stays put.