How to render a chart inside a dialog in Blazor Charts?

This article explains how to render a chart inside a dialog in Blazor Charts.

Render a Chart Inside a Dialog

Blazor Charts provides an option to render a chart inside a dialog.

This can be achieved by using the Dialog component to render the chart within the dialog. The code example below demonstrates this.

Index.razor:

In this code snippet, the Dialog component template is used to render a chart inside a dialog. The dialog is controlled by the Visibility property. The DialogOpen event hides the “Open” button when the dialog is opened, while the DialogClose event shows the “Open” button when the dialog is closed. The OnBtnClick method makes the dialog visible when the “Open” button is clicked, and the DlgButtonClick method hides the dialog when the dialog’s close button is clicked.

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Charts

<div class=" col-lg-8 control-section" id="target" style="height:350px;">
   <div>
       @if (this.ShowButton)
       {
           <button class="e-btn" @onclick="@OnBtnClick">Open</button>
       }
   </div>
   <SfDialog Width="60%" Height="100%" Target="#target" IsModal="true" @bind-Visible="Visibility">
       <DialogButtons>
           <DialogButton Content="X" IsPrimary="true" OnClick="@DlgButtonClick" />
       </DialogButtons>
       <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
       <DialogTemplates>
           <Header> Chart </Header>
           <Content>
               <SfChart Title="Olympic Medal Counts - RIO">
                   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" Interval="1" />

                   <ChartSeriesCollection>
                       <ChartSeries DataSource="@ChartPoints" XName="Country" YName="GoldMedal" Name="Gold" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column" />
                       <ChartSeries DataSource="@ChartPoints" XName="Country" YName="SilverMedal" Name="Silver" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column" />
                       <ChartSeries DataSource="@ChartPoints" XName="Country" YName="BronzeMedal" Name="Bronze" ColumnSpacing="0.1" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column" />
                   </ChartSeriesCollection>
               </SfChart>
           </Content>
       </DialogTemplates>
   </SfDialog>
</div>

<style>
   #target {
       max-height: 800px;
       height: 100%;
   }
</style>

@code {
   private bool Visibility { get; set; } = true;
   private bool ShowButton { get; set; } = false;
   
   private void DialogOpen(Object args)
   {
       this.ShowButton = false;
   }
   
   private void DialogClose(Object args)
   {
       this.ShowButton = true;
   }
   
   private void OnBtnClick()
   {
       this.Visibility = true;
   }
   
   private void DlgButtonClick()
   {
       this.Visibility = false;
   }
   
   public List<ColumnChartData> ChartPoints { get; set; } = new List<ColumnChartData>
   {
       new ColumnChartData { Country = "USA", GoldMedal = 46, SilverMedal = 37, BronzeMedal = 38 },
       new ColumnChartData { Country = "GBR", GoldMedal = 27, SilverMedal = 23, BronzeMedal = 17 },
       new ColumnChartData { Country = "CHN", GoldMedal = 26, SilverMedal = 18, BronzeMedal = 26 }
   };
   
   public class ColumnChartData
   {
       public string Country { get; set; }
       public double GoldMedal { get; set; }
       public double SilverMedal { get; set; }
       public double BronzeMedal { get; set; }
   }
} 

The following screenshot illustrates the output of the code snippet:

Live sample for render a chart inside a dialog

Conclusion:

We hope you enjoyed learning how to render a chart inside a dialog 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!