Awesome
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
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; }
}
}
Chart Options
Apex Chart options are available in the ApexChartOptions
class that can be passed to the chart. More info in Apex documentation ApexCharts Docs.
The chart options cannot be shared. Each chart instance must have its own ApexChartOptions instance
Acknowledgments
Credits to @thirstyape for making production release possible.