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>