Blazor ApexCharts

Using ApexCharts to create charts in Blazor

Blazor-ApexCharts is a Blazor wrapper for ApexCharts.js that brings interactive, declarative charts to Blazor Server, Blazor WebAssembly, and .NET MAUI applications. The wrapper exposes ApexCharts options through strongly-typed C# classes and a component-based API, so you can build dashboards without writing JavaScript.

Install

Install the NuGet package in your Blazor project for web (Server / WebAssembly), WinForms, or WPF:

dotnet add package Blazor-ApexCharts

For .NET MAUI projects, install the MAUI package instead:

dotnet add package Blazor-ApexCharts-MAUI

Register the chart service

ApexChartService is an optional scoped service that manages global options, locales, and chart instances. Register it in your Program.cs (or Startup.cs) DI container.

services.AddApexCharts();

You can also pass global options at registration time:

services.AddApexCharts(e =>
{
    e.GlobalOptions = new ApexChartBaseOptions
    {
        Debug = true,
        Theme = new Theme { Palette = PaletteType.Palette6 }
    };
});

For .NET MAUI use the dedicated extension method:

services.AddApexChartsMaui();

Imports

Add a reference to ApexCharts in your _Imports.razor so the components are available in every page:

@using ApexCharts

If you target .NET 8 or later, set the render mode of the page (or component) hosting the chart to one of the interactive modes — InteractiveServer, InteractiveWebAssembly, or InteractiveAuto — otherwise the JavaScript interop will not run.

Your first chart

Drop an <ApexChart> component into a Razor page and add one or more <ApexPointSeries> children to bind your data. The XValue / YValue lambdas tell the chart how to read each item.

<ApexChart TItem="MyData"
           Title="Sample Data">

    <ApexPointSeries TItem="MyData"
                     Items="Data"
                     Name="Net Profit"
                     SeriesType="SeriesType.Bar"
                     XValue="e => e.Category"
                     YValue="e => e.NetProfit" />

    <ApexPointSeries TItem="MyData"
                     Items="Data"
                     Name="Revenue"
                     SeriesType="SeriesType.Bar"
                     XValue="e => e.Category"
                     YValue="e => e.Revenue" />
</ApexChart>

@code {
    private List<MyData> Data { get; set; } = new();

    protected override void OnInitialized()
    {
        Data.Add(new MyData { Category = "Jan", NetProfit = 12, Revenue = 33 });
        Data.Add(new MyData { Category = "Feb", NetProfit = 43, Revenue = 42 });
        Data.Add(new MyData { Category = "Mar", NetProfit = 112, Revenue = 23 });
    }

    public class MyData
    {
        public string Category { get; set; }
        public int NetProfit { get; set; }
        public int Revenue { get; set; }
    }
}

Switching chart types

To turn the bar chart above into a line or area chart, change the SeriesType enum on each ApexPointSeries:

<ApexPointSeries TItem="MyData"
                 Items="Data"
                 Name="Revenue"
                 SeriesType="SeriesType.Line"
                 XValue="e => e.Category"
                 YValue="e => e.Revenue" />

The same applies for SeriesType.Area, SeriesType.Scatter, SeriesType.Bubble, and other point-based series. To read more about the configuration available for each type, see the plotOptions reference.

Donut and Pie charts

Pie, donut, polar area, and radial bar charts use a single dimensional data set. Use the <ApexPieSeries> component instead of <ApexPointSeries>:

<ApexChart TItem="MyData"
           Title="Sales by Category">

    <ApexPieSeries TItem="MyData"
                   Items="Data"
                   Name="Sales"
                   XValue="e => e.Category"
                   YValue="e => e.NetProfit" />
</ApexChart>

Set Options.Chart.Type = ChartType.Donut (or Pie, RadialBar, PolarArea) to switch between the available variants.

Configuring chart options

ApexChartOptions<T> mirrors the JavaScript options object documented in the ApexCharts options reference. Pass an instance via the Options parameter on <ApexChart>:

<ApexChart TItem="MyData"
           Title="Sales"
           Options="options">

    <ApexPointSeries TItem="MyData"
                     Items="Data"
                     Name="Sales"
                     SeriesType="SeriesType.Line"
                     XValue="e => e.Category"
                     YValue="e => e.NetProfit" />
</ApexChart>

@code {
    private ApexChartOptions<MyData> options = new()
    {
        Theme = new Theme { Mode = Mode.Dark },
        Stroke = new Stroke { Curve = Curve.Smooth, Width = 3 },
    };
}

Each chart instance must have its own ApexChartOptions instance — options cannot be shared between multiple charts.

Updating chart data

Hold a reference to the <ApexChart> component with @ref and call UpdateSeriesAsync() after mutating the underlying collection:

<button @onclick="ReloadData">Reload</button>

<ApexChart TItem="WeatherForecast"
           Title="Temperature"
           @ref="chart">

    <ApexPointSeries TItem="WeatherForecast"
                     Items="forecasts"
                     Name="Temp C"
                     SeriesType="SeriesType.Line"
                     XValue="e => e.Date"
                     YValue="e => e.TemperatureC" />
</ApexChart>

@code {
    private List<WeatherForecast> forecasts = new();
    private ApexChart<WeatherForecast> chart;

    private async Task ReloadData()
    {
        forecasts = await LoadForecastsAsync();
        await chart.UpdateSeriesAsync(animate: true);
    }
}

UpdateOptionsAsync is the equivalent for changing chart options at runtime. Both methods accept a flag to control whether the change is animated.

More chart examples

Browse the Blazor-ApexCharts demo site for a full gallery of chart types, including line, area, candlestick, heatmap, treemap, radar, range bar, and more — each with a copy-pastable Razor source. The component supports the full ApexCharts option surface, so anything documented in the Options reference is available from C#.

Need advanced chart features?

We have partnered with Infragistics to grant you access to an extensive library of data visualizations that enables stunning and interactive Blazor charts for your web and mobile apps. The Ignite UI for Blazor charts deliver customizable features like animations, highlighting, annotations, drill-down, multiple layers, tooltips, and more — with an intuitive API, flexible theming, and minimal code to get started.

If your Blazor application needs to render millions of data points, advanced financial charts, or specialized chart types beyond the open-source ApexCharts library, the Infragistics integration is the recommended next step.