blazor-apexcharts's Introduction

Blazor-ApexCharts

A blazor wrapper for ApexCharts.js

Demo

v2.0 Released to production!

It's no longer necessary to manually include javascript files. Please REMOVE any references to:

<script src="_content/Blazor-ApexCharts/js/apex-charts.min.js"></script>
<script src="_content/Blazor-ApexCharts/js/blazor-apex-charts.js"></script>

As of version 2.0 javascript interop on WASM is running synchronously for better performance.

Installation

NuGet

Blazor-ApexCharts

dotnet add package Blazor-ApexCharts

Usage

Imports

Add a reference to Blazor-ApexCharts in your _Imports.razor

@using ApexCharts

.NET 8

If you are on .NET 8 you need to set the rendermode to Interactive.

Interactive Server, Interactive WebAssembly or Interactive Auto

Your first chart

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