https://github.com/apexcharts/blazor-apexcharts
A blazor wrapper for ApexCharts.js
https://github.com/apexcharts/blazor-apexcharts
apexcharts blazor blazor-apexcharts blazor-charts wrapper
Last synced: about 1 year ago
JSON representation
A blazor wrapper for ApexCharts.js
- Host: GitHub
- URL: https://github.com/apexcharts/blazor-apexcharts
- Owner: apexcharts
- License: mit
- Created: 2020-04-14T19:10:26.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-18T05:18:53.000Z (about 1 year ago)
- Last Synced: 2025-04-28T14:04:56.882Z (about 1 year ago)
- Topics: apexcharts, blazor, blazor-apexcharts, blazor-charts, wrapper
- Language: C#
- Homepage: https://apexcharts.github.io/Blazor-ApexCharts
- Size: 456 MB
- Stars: 921
- Watchers: 15
- Forks: 96
- Open Issues: 49
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Blazor-ApexCharts
A blazor wrapper for [ApexCharts.js](https://apexcharts.com/)
## [Demo](https://apexcharts.github.io/Blazor-ApexCharts)
## Installation
### NuGet
For Blazor projects running in a web browser, WinForms, or WPF.
[Blazor-ApexCharts](https://www.nuget.org/packages/Blazor-ApexCharts/)
```bash
dotnet add package Blazor-ApexCharts
```
For Blazor projects running on .NET MAUI.
[Blazor-ApexCharts-MAUI](https://www.nuget.org/packages/Blazor-ApexCharts-MAUI/)
```bash
dotnet add package Blazor-ApexCharts-MAUI
```
### ChartService
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.
```razor
services.AddApexCharts();
```
or add it with global options
```razor
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.
```razor
services.AddApexChartsMaui();
```
## Usage
### Imports
Add a reference to `Blazor-ApexCharts` in your `_Imports.razor`
```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
```razor
@code {
private List 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](https://apexcharts.com/docs/options/).
**The chart options cannot be shared. Each chart instance must have its own ApexChartOptions instance**
## Acknowledgments
Credits to [@thirstyape](https://github.com/thirstyape) for making production release possible.
[](https://github.com/apexcharts/Blazor-ApexCharts/stargazers)