A blazor wrapper for ApexCharts.js
For Blazor projects running in a web browser, WinForms, or WPF. Blazor-ApexCharts
dotnet add package Blazor-ApexCharts
For Blazor projects running on .NET MAUI. Blazor-ApexCharts-MAUI
dotnet add package Blazor-ApexCharts-MAUI
ApexChartService is an optional service that will manage global options, set locales, manage charts on the screen. Add the chart service to the DI container by using the extension AddApexCharts(). This will add a scoped IApexChartService to the container.
services.AddApexCharts();
or add it with global options
services.AddApexCharts(e =>
{
e.GlobalOptions = new ApexChartBaseOptions
{
Debug = true,
Theme = new Theme { Palette = PaletteType.Palette6 }
};
});
The same as above can be used for .NET MAUI, just make sure to use the method below to add the chart service.
services.AddApexChartsMaui();
Add a reference to Blazor-ApexCharts in your _Imports.razor
If you are on .NET 8 you need to set the rendermode to Interactive.
Interactive Server, Interactive WebAssembly or Interactive Auto
<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; }
}
}
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
Credits to @thirstyape for making production release possible.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4