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: 10 days 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 (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-07T11:11:41.000Z (7 months ago)
• Last Synced: 2024-04-14T11:30:06.257Z (7 months ago)
• Topics: apexcharts, blazor, blazor-apexcharts, blazor-charts, wrapper
• Language: C#
• Homepage: https://apexcharts.github.io/Blazor-ApexCharts
• Size: 358 MB
• Stars: 653
• Watchers: 13
• Forks: 76
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazor - Blazor-ApexCharts -   Blazor wrapper for ApexCharts. [Demo](https://joadan.github.io/Blazor-ApexCharts/basic-charts). (Libraries & Extensions / 2D/3D Rendering engines)

README

        


![.NET Core](https://github.com/joadan/Blazor-ApexCharts/workflows/.NET%20Core/badge.svg?branch=master)

# Blazor-ApexCharts

A blazor wrapper for [ApexCharts.js](https://apexcharts.com/)

## [Demo](https://apexcharts.github.io/Blazor-ApexCharts)

## v2.0 Released to production!

It's no longer necessary to manually include javascript files. 

Please **REMOVE** any references to:  

```html

```

---

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

## Installation

### NuGet

[Blazor-ApexCharts](https://www.nuget.org/packages/Blazor-ApexCharts/)

```bash

dotnet add package Blazor-ApexCharts

```

## 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.

[![Stargazers repo roster for @apexcharts/Blazor-ApexCharts](https://reporoster.com/stars/dark/apexcharts/Blazor-ApexCharts)](https://github.com/apexcharts/Blazor-ApexCharts/stargazers)