How to display a chart based on a selected card in Blazor Charts?

This article explains how to display a chart based on a selected card in Blazor Charts.

Displaying Chart Based on Selected Card

Blazor Charts provides an option to render a chart based on a selected card using if-else condition without navigating from the page.

This can be achieved by creating separate razor pages for each chart with names Chart_1, Chart_2, Chart_3 and Chart_4 under the Pages folder. Then create 4 DIV elements for clicking and apply the card style for each DIV using CSS. When clicking a card, the corresponding chart is rendered by checking the string SELECTED using an if condition in the onclick method. The chart will be cleared by assigning an empty string before displaying each chart.

The code example below demonstrates how to render a chart based on a selected card.

DataChangeChart.razor:

<div class="card-container">
   <div class="row">
       <div id="chart_1" class="e-card @isChart_1_Selected" @onclick="Chart_1_Click">
           <span style="font-size: initial">Chart 1</span>
       </div>
       <div id="chart_2" class="e-card @isChart_2_Selected" @onclick="Chart_2_Click">
           <span style="font-size: initial">Chart 2</span>
       </div>
       <div id="chart_3" class="e-card @isChart_3_Selected" @onclick="Chart_3_Click">
           <span style="font-size: initial">Chart 3</span>
       </div>
       <div id="chart_4" class="e-card @isChart_4_Selected" @onclick="Chart_4_Click">
           <span style="font-size: initial">Chart 4</span>
       </div>
   </div>
</div>
<style>
   .e-card {
       width: 20%;
       height: 80px;
       border-radius: 5px;
       border: 1px solid #e0e0e0;
       margin: 10px;
       display: flex;
       justify-content: center;
       align-items: center;
       cursor: pointer;
   }
</style>

@if (isChart_1_Selected == SELECTED)
{
   <Chart_1></Chart_1>
}
else if (isChart_2_Selected == SELECTED)
{
   <Chart_2></Chart_2>
}
else if (isChart_3_Selected == SELECTED)
{
   <Chart_3></Chart_3>
}
else
{
   <Chart_4></Chart_4>
}

@code {
   const string SELECTED = "selected";
   string isChart_1_Selected = SELECTED;
   string isChart_2_Selected = "";
   string isChart_3_Selected = "";
   string isChart_4_Selected = "";

   public void Chart_1_Click()
   {
       ClearSelected();
       isChart_1_Selected = SELECTED;
   }

   public void Chart_2_Click()
   {
       ClearSelected();
       isChart_2_Selected = SELECTED;
   }

   public void Chart_3_Click()
   {
       ClearSelected();
       isChart_3_Selected = SELECTED;
   }

   public void Chart_4_Click()
   {
       ClearSelected();
       isChart_4_Selected = SELECTED;
   }
   void ClearSelected()
   {
       isChart_1_Selected = "";
       isChart_2_Selected = "";
       isChart_3_Selected = "";
       isChart_4_Selected = "";
   }
} 

Chart_1.razor:

@using Syncfusion.Blazor.Charts

<SfChart Title="Chart 1">
   <ChartSeriesCollection>
       <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Line">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart> 

Chart_2.razor:

@using Syncfusion.Blazor.Charts

<SfChart Title="Chart 2">
   <ChartSeriesCollection>
       <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.StepLine">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart> 

Chart_3.razor:

@using Syncfusion.Blazor.Charts

<SfChart Title="Chart 3">
   <ChartSeriesCollection>
       <ChartSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="ChartSeriesType.Area">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart> 

Chart_4.razor:

@using Syncfusion.Blazor.Charts

<SfChart Title="Chart 4">
   <ChartSeriesCollection>
       <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Type="ChartSeriesType.RangeArea">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart> 

Output:

Sample for Displaying a Chart Based on a Selected Card

Conclusion:

We hope you enjoyed learning how to display a chart based on a selected card in Blazor Charts.

You can refer to our Blazor Chart feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

If you have any questions 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!