series.drilldownSeriesFactory Function

A function that creates the drilldown series for a given point.

The function should accept a single parameter, the point drilldownField value. The function should return a series configuration object or a Promise that resolves to one.

Example - use the chart series drilldownSeriesFactory function to implement dynamic drilldown

<nav id="breadcrumb"></nav>
<div id="chart"></div>
<script>
  var vehiclesByModel = {
    'Tesla': [{
      model: 'Model 3',
      count: 225350
    }, {
      model: 'Model Y',
      count: 40159
    }],
    'VW': [{
      model: 'ID.3',
      count: 60274
    }, {
      model: 'ID.4',
      count: 20302
    }]
  };

  var vehiclesByMake = [{
    company: 'Tesla',
    count: 314159
  }, {
    company: 'VW',
    count: 112645
  }];

  function drilldownByModel(make) {
    const data = vehiclesByModel[make];
    if (data) {
      return {
        type: 'column',
        name: make + ' Sales by Model',
        data,
        field: 'count',
        categoryField: 'model'
      };
    }
  };

  $("#chart").kendoChart({
    series: [{
      type: 'column',
      name: 'Battery EVs registered in 2022',
      data: vehiclesByMake,
      field: 'count',
      categoryField: 'company',
      drilldownField: 'company',
      drilldownSeriesFactory: drilldownByModel
    }]
  });

  $('#breadcrumb').kendoChartBreadcrumb({
    chart: "#chart"
  });
</script>
In this article