New to Kendo UI for jQuery? Start a free 30-day trial

Drilldown

events

Fires when the user when the user wants to drill down on a specific point.

The event handler function context (available via the this keyword) will be set to the widget instance.

drilldown

Event Data

e.drilldownSeries `Object`

The configuration object for the newly created drilldown series.

e.point `Object`

The point to drill down into.

e.preventDefault `Function`

If invoked the drill down operation will be cancelled and the Chart will remain in the same state.

e.sender `kendo.dataviz.ui.Chart`

The widget instance which fired the event.

e.series `Object`

The configuration object for the series to drill down into.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { data: [1, 2] }
  ],
  drilldown: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("drilldown");
  }
});
</script>

<div id="chart"></div>
<script>
function onDrilldown(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
  console.log("drilldown");
}
$("#chart").kendoChart({
  series: [
    { data: [1, 2] }
  ]
});
var chart = $("#chart").data("kendoChart");
chart.bind("drilldown", onDrilldown);
</script>

<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({
    drilldown: function (e) {
      console.log(e);
    },
    series: [
      {
        type: "column",
        name: "Battery EVs registered in 2022",
        data: vehiclesByMake,
        field: "count",
        categoryField: "company",
        drilldownField: "company",
        drilldownSeriesFactory: drilldownByModel,
      },
    ],
  });

  $("#breadcrumb").kendoChartBreadcrumb({
    chart: "#chart",
  });
</script>