DOCSEARCHbyAlgolia
Submit Docs

Blazor-ApexCharts Documentation

repository·master·Indexed 21 days ago

https://github.com/apexcharts/blazor-apexcharts

A Blazor wrapper for the ApexCharts.js library that enables interactive and customizable charts in Blazor applications across Web, WinForms, WPF, and .NET MAUI. It provides the <ApexChart> component, IApexChartService for global configuration, and support for premium features via license keys.

Tokens
1.5K
Snippets
5
Records
7
Agent score
27%

What's inside Blazor-ApexCharts

  2. Install Blazor-ApexCharts via NuGet

    master

    Depending on your project type, install the appropriate NuGet package:

    • For Web (Browser), WinForms, or WPF: Use Blazor-ApexCharts.
    • For .NET MAUI: Use Blazor-ApexCharts-MAUI.
    # For Web, WinForms, or WPF
dotnet add package Blazor-ApexCharts

# For .NET MAUI
dotnet add package Blazor-ApexCharts-MAUI

  3. Configure the ApexChartService

    master

    The IApexChartService is an optional service used to manage global options, locales, and charts on the screen. Register it in your DI container using AddApexCharts() (for Web/WinForms/WPF) or AddApexChartsMaui() (for .NET MAUI).

    You can optionally configure global options, such as enabling debug mode or setting a default theme palette, during registration.

    // Basic registration
services.AddApexCharts();

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

// For .NET MAUI
services.AddApexChartsMaui();

  6. Apply a license key for Premium Features

    master

    Premium modules (like history, perspectives, link, ink, measure, contextMenu, and storyboard) work in trial mode but display an APEXCHARTS watermark. You can apply a license key in three ways:

    1. Application-wide (Recommended): Via the chart service during DI registration.
    2. Configuration/Environment: Loading the key from IConfiguration during DI registration.
    3. Per-chart: Passing a new ApexChartOptions instance directly to the <ApexChart> component. This method avoids a first-render flash.

    You can also update the key at runtime using ChartService.SetLicenseAsync("KEY").

    // 1. Application-wide via service
services.AddApexCharts(e =>
{
    e.LicenseKey = "APEX-your-license-key";
});

// 2. From configuration
services.AddApexCharts(e =>
{
    e.LicenseKey = builder.Configuration["APEXCHARTS_LICENSE_KEY"];
});

// 3. Per-chart via Options
<ApexChart TItem="MyData" Options="@(new ApexChartOptions<MyData> { Chart = new Chart { License = "APEX-your-license-key" } })">
    ...
</ApexChart>

// Runtime update
await ChartService.SetLicenseAsync("APEX-your-license-key");

  7. Create your first chart with ApexChart

    master

    To render a chart, use the <ApexChart> component. You must specify a TItem type which represents the data model for your series. Inside the chart, define one or more <ApexPointSeries> components to map your data to the chart axes using lambda expressions for XValue and YValue.

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