Get Started with Blazor Charts (Chart, Pie and Donut, Polar)

• Aug 13, 2024
• 8 minutes to read

This tutorial describes how to build a simple Blazor application with DevExpress Blazor Charts.

Watch Video: Get Started with Charts

Create an Application

Create an application as described in the following topic: Create an application. If you chose Microsoft templates, you should also complete two more steps to configure the application:

• Set Up the DevExpress NuGet Package in the Application
• Register DevExpress Blazor Resources

Enable Interactivity on a Page

Blazor charts do not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.

Prepare a Data Source and Bind It to a Component

1. Create a DataPoint class in one of the following folders:

   • Services for apps that target .NET 8
   • Data for other .NET versions

   Add two fields to this class: Country and AppleProduction.

   DataPoint.cs

   public class DataPoint {
       public string Country { get; set; }
       public double AppleProduction { get; set; }
       public DataPoint(string country, double appleProduction) {
           Country = country;
           AppleProduction = appleProduction;
       }
   }
   

2. In the same folder, create a DataPointProvider class to generate and return values:

   DataPointProvider.cs

   public class DataPointProvider {
       public static List<DataPoint> ReturnPoints() {
           return new List<DataPoint>() {
               new DataPoint("USA", 4.21),
               new DataPoint("China", 3.33),
               new DataPoint("Turkey", 2.6),
               new DataPoint("Italy", 2.2),
               new DataPoint("India", 2.16),
           };
       }
   }
   

3. Obtain generated data in the Index.razor file’s @code block:

   Index.razor

   @rendermode InteractiveServer
   @* For .NET 8 apps *@
   @using MyBlazorApp.Services
   @* For other .NET versions *@
   @using MyBlazorApp.Data
   
   @code {
       IEnumerable<DataPoint> DataSource;
   
       protected override void OnInitialized() {
           DataSource = DataPointProvider.ReturnPoints();
       }
   }
   

4. Add chart component tags to the same .razor file:

   Chart

   <DxChart>
   </DxChart>
   
   @code {
       // ...
   }
   

   Pie and Donut

   <DxPieChart>
   </DxPieChart>
   
   @code {
       // ...
   }
   

   Polar

   <DxPolarChart>
   </DxPolarChart>
   
   @code {
       // ...
   }
   

5. Assign the DataSource collection to the component’s Data property:

   Chart

   <DxChart Data="DataSource">
   </DxChart>
   

   Pie and Donut

   <DxPieChart Data="DataSource">
   </DxPieChart>
   

   Polar

   <DxPolarChart Data="DataSource">
   </DxPolarChart>
   

Add Series

Follow the steps below to create a series:

1. Add an appropriate series object to chart markup. Refer to the following topic for more information on available series types: Series Types in Blazor Charts.

   The following snippets create a line series in <DxChart> and <DxPolarChart>, and a pie series in <DxPieChart>:

   Chart

   <DxChart Data="DataSource">
       <DxChartLineSeries />
   </DxChart>
   

   Pie and Donut

   <DxPieChart Data="DataSource">
       <DxPieChartSeries />
   </DxPieChart>
   

   Polar

   <DxPolarChart Data="DataSource">
       <DxPolarChartLineSeries />
   </DxPolarChart>
   

2. Specify ArgumentField and ValueField properties to populate the component with arguments and values, respectively. In the following code snippet, the Country field contains arguments and the AppleProduction field contains values.

   Chart

   <DxChart Data="DataSource">
       <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)" 
                          ValueField="@((DataPoint v) => v.AppleProduction)" />
   </DxChart>
   

   Pie and Donut

   <DxPieChart Data="DataSource">
       <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)" 
                         ValueField="@((DataPoint v) => v.AppleProduction)" />
   </DxPieChart>
   

   Polar

   <DxPolarChart Data="DataSource">
       <DxPolarChartLineSeries ArgumentField="@((DataPoint v) => v.Country)" 
                               ValueField="@((DataPoint v) => v.AppleProduction)" />
   </DxPolarChart>
   

3. Specify the Name property to assign a unique identifier to a series. This identifier allows you to manage series in code and serves as legend item text. Note that <DxPieChart> treats each sector as an individual point and generates legend items based on arguments. That is why the Name property does not affect the pie chart’s legend.

   Chart

   <DxChart Data="DataSource">
       <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)" 
                          ValueField="@((DataPoint v) => v.AppleProduction)"
                          Name="Apples" />
   </DxChart>
   

   Pie and Donut

   <DxPieChart Data="DataSource">
       <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)" 
                         ValueField="@((DataPoint v) => v.AppleProduction)"
                         Name="Apples" />
   </DxPieChart>
   

   Polar

   <DxPolarChart Data="DataSource">
       <DxPolarChartLineSeries ArgumentField="@((DataPoint v) => v.Country)" 
                               ValueField="@((DataPoint v) => v.AppleProduction)"
                               Name="Apples" />
   </DxPolarChart>
   

If you add multiple series to <DxChart> or <DxPolarChart>, the component displays data on the same plane. Muiltiple series in one <DxPieChart> result in multiple nested rings in the same pie.

Show Series Labels

Add a DxChartSeriesLabel object to a series markup and set its Visible property to true:

Chart

@rendermode InteractiveServer

<DxChart Data="DataSource">
    <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                       ValueField="@((DataPoint v) => v.AppleProduction)"
                       Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxChartLineSeries>
</DxChart>

Pie and Donut

@rendermode InteractiveServer

<DxPieChart Data="DataSource">
    <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPieChartSeries>
</DxPieChart>

Polar

@rendermode InteractiveServer

<DxPolarChart Data="DataSource">
    <DxPolarChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                            ValueField="@((DataPoint v) => v.AppleProduction)"
                            Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartLineSeries>
</DxPolarChart>

If you have multiple series on one plane, you may want to set the component’s LabelOverlap property to ChartLabelOverlap.Hide to prevent labels from being displayed if they overlap.

Add a Chart Title

Declare DxChartTitle and DxChartSubTitle objects and specify their Text properties.

Chart

@rendermode InteractiveServer

<DxChart Data="DataSource">
    <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                       ValueField="@((DataPoint v) => v.AppleProduction)"
                       Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxChartLineSeries>
        <DxChartSubTitle Text="(Millions of Tons)" />
    </DxChartTitle>
</DxChart>

Pie and Donut

@rendermode InteractiveServer

<DxPieChart Data="DataSource">
    <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPieChartSeries>
    <DxChartTitle Text="Fruit Production By Country">
        <DxChartSubTitle Text="(Millions of Tons)" />
    </DxChartTitle>
</DxPieChart>

Polar

@rendermode InteractiveServer

<DxPolarChart Data="DataSource">
    <DxPolarChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                            ValueField="@((DataPoint v) => v.AppleProduction)"
                            Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartLineSeries>
    @* ... *@
    <DxChartTitle Text="Fruit Production By Country">
        <DxChartSubTitle Text="(Millions of Tons)" />
    </DxChartTitle>
</DxPolarChart>

Apply Customizations

Blazor chart components support various customization options. Refer to the sections below for more information.

Position a Legend

Add a DxChartLegend object to chart markup and specify its properties as shown in the following code snippets:

Chart

@rendermode InteractiveServer

<DxChart Data="DataSource">
    <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                       ValueField="@((DataPoint v) => v.AppleProduction)"
                       Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxChartLineSeries>
    @* ... *@
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
</DxChart>

Pie and Donut

@rendermode InteractiveServer

<DxPieChart Data="DataSource">
    <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPieChartSeries>
    @* ... *@
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
</DxPieChart>

Polar

@rendermode InteractiveServer

<DxPolarChart Data="DataSource">
    <DxPolarChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                            ValueField="@((DataPoint v) => v.AppleProduction)"
                            Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartLineSeries>
    @* ... *@
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
</DxPolarChart>

This code snippet aligns the legend to the right and displays it above the chart plane.

Change Appearance of Series Points and Their Labels

Handle the CustomizeSeriesPoint event to customize the appearance of series points, pie sectors, and their labels. The Point event argument allows you to access a series data point, analyze its values, and apply the required appearance to points and labels.

The following code snippet colors point labels blue if a data point’s value is less than 3:

Chart

@rendermode InteractiveServer

<DxChart Data="DataSource" CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                       ValueField="@((DataPoint v) => v.AppleProduction)"
                       Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxChartLineSeries>
    @* ... *@
</DxChart>

@code {
    @* ... *@
    void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
        if ((double)args.Point.Value < 3)
            args.PointLabel.BackgroundColor = System.Drawing.Color.LightBlue;
    }
}

Pie and Donut

@rendermode InteractiveServer

<DxPieChart Data="DataSource" CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPieChartSeries>
    @* ... *@
</DxPieChart>

void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    if ((double)args.Point.Value < 3)
        args.PointLabel.BackgroundColor = System.Drawing.Color.LightBlue;
}

Polar

@rendermode InteractiveServer

<DxPolarChart Data="DataSource" CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                            ValueField="@((DataPoint v) => v.AppleProduction)"
                            Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartLineSeries>
    @* ... *@
</DxPolarChart>

void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
    if ((double)args.Point.Value < 3)
        args.PointLabel.BackgroundColor = System.Drawing.Color.LightBlue;
}

More Features

For more information about chart features, refer to the following component class descriptions:

• DxChart
• DxPieChart
• DxPolarChart

Complete Code

Show Complete Code

Chart

@rendermode InteractiveServer
@* For .NET 8 apps *@
@using MyBlazorApp.Services
@* For other .NET versions *@
@using MyBlazorApp.Data

<DxChart Data="DataSource" CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                       ValueField="@((DataPoint v) => v.AppleProduction)"
                       Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxChartLineSeries>
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
    <DxChartTitle Text="Fruit Production By Country">
        <DxChartSubTitle Text="(Millions of Tons)" />
    </DxChartTitle>
</DxChart>

@code {
    IEnumerable<DataPoint> DataSource;

    protected override void OnInitialized() {
        DataSource = DataPointProvider.ReturnPoints();
    }

    void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
        if ((double)args.Point.Value < 3)
            args.PointLabel.BackgroundColor = System.Drawing.Color.LightBlue;
    }
}

Pie and Donut

@rendermode InteractiveServer
@* For .NET 8 apps *@
@using MyBlazorApp.Services
@* For other .NET versions *@
@using MyBlazorApp.Data

<DxPieChart Data="DataSource" CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPieChartSeries ArgumentField="@((DataPoint v) => v.Country)"
                      ValueField="@((DataPoint v) => v.AppleProduction)"
                      Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPieChartSeries>
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
    <DxChartTitle Text="Fruit Production By Country">
        <DxChartSubTitle Text="(Millions of Tons)" />
    </DxChartTitle>
</DxPieChart>

@code {
    IEnumerable<DataPoint> DataSource;

    protected override void OnInitialized() {
        DataSource = DataPointProvider.ReturnPoints();
    }

    void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
        if ((double)args.Point.Value < 3)
            args.PointLabel.BackgroundColor = System.Drawing.Color.LightBlue;
    }
}

Polar

@rendermode InteractiveServer
@* For .NET 8 apps *@
@using MyBlazorApp.Services
@* For other .NET versions *@
@using MyBlazorApp.Data

<DxPolarChart Data="DataSource" CustomizeSeriesPoint="@OnCustomizeSeriesPoint">
    <DxPolarChartLineSeries ArgumentField="@((DataPoint v) => v.Country)"
                            ValueField="@((DataPoint v) => v.AppleProduction)"
                            Name="Apples">
        <DxChartSeriesLabel Visible="true" />
    </DxPolarChartLineSeries>
    <DxChartLegend Orientation="Orientation.Horizontal"
                   HorizontalAlignment="HorizontalAlignment.Right"
                   Position="RelativePosition.Outside" />
    <DxChartTitle Text="Fruit Production By Country">
        <DxChartSubTitle Text="(Millions of Tons)" />
    </DxChartTitle>
</DxPolarChart>

@code {
    IEnumerable<DataPoint> DataSource;

    protected override void OnInitialized() {
        DataSource = DataPointProvider.ReturnPoints();
    }

    void OnCustomizeSeriesPoint(ChartSeriesPointCustomizationSettings args) {
        if ((double)args.Point.Value < 3)
            args.PointLabel.BackgroundColor = System.Drawing.Color.LightBlue;
    }
}

DataPoint.cs

public class DataPoint {
    public string Country { get; set; }
    public double AppleProduction { get; set; }
    public DataPoint(string country, double appleProduction) {
        Country = country;
        AppleProduction = appleProduction;
    }
}

DataPointProvider.cs

public class DataPointProvider {
    public static List<DataPoint> ReturnPoints() {
        return new List<DataPoint>() {
               new DataPoint("USA", 4.21, 6.22),
               new DataPoint("China", 3.33, 8.65),
               new DataPoint("Turkey", 2.6, 4.25),
               new DataPoint("Italy", 2.2, 7.78),
               new DataPoint("India", 2.16, 2.26),
        };
    }
}