How to create Drilldown chart in Blazor

[Syncfusion Support]

Answer:

We can create drilldown using AccumulationChartSeries in blazor chart. Here is the code snippet for your reference.

<SfAccumulationChart ID="chart" EnableAnimation="false">

<AccumulationChartEvents OnPointClick="pointClick" />

<AccumulationChartSeriesCollection>

<AccumulationChartSeries DataSource="@chartData" XName="xValue" YName="yValue" InnerRadius="0%">

AccumulationChartSeries>

AccumulationChartSeriesCollection>

SfAccumulationChart>

public class PieData1

{

public string xValue { get; set; }

public double yValue { get; set; }

public string r { get; set; }

}

private List chartData = new List();

private List dataSource = new List

{

new PieData1 { xValue = "SUV", yValue = 37},

new PieData1 { xValue = "Car", yValue = 17},

new PieData1 { xValue = "Pickup", yValue = 19 }

};

private List SUV = new List

{

new PieData1 { xValue = "Toyota", yValue = 10},

new PieData1 { xValue = "Ford", yValue = 24},

////

};

private List Car = new List

{

new PieData1 { xValue = "Chrysler", yValue = 15},

new PieData1 { xValue = "Missan", yValue = 45},

//

};

private List Pickup = new List

{

new PieData1 { xValue = "Nissan", yValue = 15},

new PieData1 { xValue = "Chrysler", yValue = 45},

////

};

void pointClick(IPointEventArgs args)

{

double index = args.PointIndex;

if (index == 0)

{

chartData = SUV;

} else if(index == 1)

{

chartData = Car;

} else if (index == 2)

{

chartData = Pickup;

}

}

Find the blazor drilldown chart sample from here.