How to perform drilldown in a bar chart in Blazor Charts?
This article explains how to perform drilldown in a bar chart in Blazor Charts.
Perform Drilldown for Bar Chart
Blazor Charts offers an option to perform a drilldown in a bar chart. To achieve this, you can utilize the OnPointClick event to change the data points when drilling down into the bar chart.
In the following code snippet, the OnPointClick event is employed to modify the chart data based on the clicked data point. The BackClick method resets the chart to its original state, while the ChartPointClick method updates the chart with new data specific to the selected category and adjusts the title and text accordingly. This setup enables users to interactively explore different segments of the data by clicking on the chart points.
Index.razor
@using Syncfusion.Blazor.Charts
<div id="link">
<a id="category" @onclick="BackClick" style="color:blue;visibility:@Visible; display:inline-block">
Sales by Category
</a>
<p style="visibility:@Visible; display:inline-block" id="symbol"> >> </p>
<p id="text" style="display:inline-block;">@Text</p>
</div>
<SfChart ID="drilldown" Title="@Title">
<ChartEvents OnPointClick="ChartPointClick"></ChartEvents>
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
<ChartSeriesCollection>
<ChartSeries DataSource="@ChartPoints" XName="XValue" YName="YValue" Type="ChartSeriesType.Bar">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>
<style>
#category:hover {
cursor: pointer;
}
path[id^=drilldown_Series_0_Point_] {
@CSS_Cursor
}
</style>
@code {
public string CSS_Cursor { get; set; } = "cursor: pointer !important";
public string Visible { get; set; } = "hidden";
public string Text { get; set; } = string.Empty;
public string Title { get; set; } = "Automobile Sales by Category";
public class ChartData
{
public string? XValue { get; set; }
public double YValue { get; set; }
}
public List<ChartData> ChartPoints { get; set; } = new List<ChartData>
{
new ChartData { XValue = "SUV", YValue = 25},
new ChartData { XValue = "Car", YValue = 37},
new ChartData { XValue = "Pickup", YValue = 15 },
new ChartData { XValue = "Minivan", YValue = 23 }
};
private void BackClick(MouseEventArgs args)
{
Visible = "hidden";
CSS_Cursor = "cursor: pointer !important";
Title = "Automobile Sales by Category";
Text = string.Empty;
ChartPoints = new List<ChartData>
{
new ChartData { XValue = "SUV", YValue = 25},
new ChartData { XValue = "Car", YValue = 37},
new ChartData { XValue = "Pickup", YValue = 15 },
new ChartData { XValue = "Minivan", YValue = 23 }
};
StateHasChanged();
}
private void ChartPointClick(PointEventArgs args)
{
if (Visible == "visible")
{
return;
}
CSS_Cursor = "cursor: default !important";
Visible = "visible";
switch (args.PointIndex)
{
case 0:
ChartPoints = new List<ChartData>
{
new ChartData { XValue = "Toyota", YValue = 8},
new ChartData { XValue = "Ford", YValue = 12},
new ChartData { XValue = "GM", YValue = 17 },
new ChartData { XValue = "Renault", YValue = 6 },
new ChartData { XValue = "Fiat", YValue = 3},
new ChartData { XValue = "Hyundai", YValue = 16},
new ChartData { XValue = "Honda", YValue = 8 },
new ChartData { XValue = "Maruthi", YValue = 10 },
new ChartData { XValue = "BMW", YValue = 20 }
};
Text = "SUV";
Title = "Automobile Sales in the SUV Segment";
break;
case 1:
ChartPoints = new List<ChartData>
{
new ChartData { XValue = "Toyota", YValue = 7},
new ChartData { XValue = "Chrysler", YValue = 12},
new ChartData { XValue = "Nissan", YValue = 9 },
new ChartData { XValue = "Ford", YValue = 15 },
new ChartData { XValue = "Tata", YValue = 10},
new ChartData { XValue = "Mahindra", YValue = 7},
new ChartData { XValue = "Renault", YValue = 8 },
new ChartData { XValue = "Skoda", YValue = 5 },
new ChartData { XValue = "Volkswagen", YValue = 15 },
new ChartData {XValue="Fiat", YValue=3}
};
Text = "Car";
Title = "Automobile Sales in the Car Segment";
break;
case 2:
ChartPoints = new List<ChartData>
{
new ChartData { XValue = "Nissan", YValue = 9},
new ChartData { XValue = "Chrysler", YValue = 4},
new ChartData { XValue = "Ford", YValue = 7 },
new ChartData { XValue = "Toyota", YValue = 20 },
new ChartData { XValue = "Suzuki", YValue = 13},
new ChartData { XValue = "Lada", YValue = 12},
new ChartData { XValue = "Bentley", YValue = 6 },
new ChartData { XValue = "Volvo", YValue = 10 },
new ChartData {XValue="Audi", YValue=19}
};
Text = "Pickup";
Title = "Automobile Sales in the Pickup Segment";
break;
case 3:
ChartPoints = new List<ChartData>
{
new ChartData { XValue = "Hummer", YValue = 11},
new ChartData { XValue = "Ford", YValue = 5},
new ChartData { XValue = "GM", YValue = 12 },
new ChartData { XValue = "Chrysler", YValue = 3 },
new ChartData { XValue = "Jaguar", YValue = 9},
new ChartData { XValue = "Fiat", YValue = 8},
new ChartData { XValue = "Honda", YValue = 15 },
new ChartData { XValue = "Scion", YValue = 11 },
new ChartData {XValue="Toyota", YValue=17}
};
Text = "Minivan";
Title = "Automobile Sales in the Minivan Segment";
break;
}
StateHasChanged();
}
}
The following screenshot illustrates the output of the code snippet.
Live Sample for Performing Drilldown in a Bar Chart
Conclusion
I hope you enjoyed learning how to perform drilldown for bar chart in Blazor Charts.
You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!
