Skip to main content
BuyLog In
Blazor
Search in…
Docs > Components > Charts > Get Started with Charts
All docs
V24.1
Blazor Components
Prerequisites
Supported Browsers
Get Started
Upgrade to a New Version
Demos
Examples
Videos
Common Concepts
Components
Grid
Bar Gauge
Charts
Chart
Pie and Donut Chart
Polar Chart
Get Started with Charts
Series Types
Axes
Labels
Descriptive Elements
Customization
Dashboard
Data Editors
Dialogs and Windows
File Management
HTML Editor
Layout
Map
Navigation
PDF Viewer (CTP)
Reports
Pivot Grid
Rich Text Editor
Scheduler
Sparkline
TreeList (CTP)
Utility Controls
Backend Web API Service
Office File API
DevExtreme Components
Styling and Themes
Security Considerations
Troubleshooting
Blazor & WinForms App UI Framework (Powered by EF Core)
Maintenance Mode
API Reference
Download CHM

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

  • 8 minutes to read

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

Charts Get Started

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:

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 or .NET 9
    • Data for other .NET versions

    Add two fields to this class: Country and AppleProduction.

    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:

    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:

    @rendermode InteractiveServer
@* For .NET 8 and .NET 9 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:

    <DxChart>
</DxChart>

@code {
    // ...
}

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

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

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>:

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

  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.

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

  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.

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

Charts Get Started Add Series

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:

@rendermode InteractiveServer

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

Charts Get Started Add Series Labels

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.

@rendermode InteractiveServer

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

Charts Get Started Add Chart Title

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:

@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>

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

Charts Get Started Customize Legend

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:

@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;
    }
}

Customize series points

More Features

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

Complete Code

Show Complete Code
@rendermode InteractiveServer
@* For .NET 8 and .NET 9 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;
    }
}

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

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),
        };
    }
}