Blazor-ApexCharts 3.3.0

dotnet add package Blazor-ApexCharts --version 3.3.0
NuGet\Install-Package Blazor-ApexCharts -Version 3.3.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="Blazor-ApexCharts" Version="3.3.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Blazor-ApexCharts --version 3.3.0
#r "nuget: Blazor-ApexCharts, 3.3.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install Blazor-ApexCharts as a Cake Addin
#addin nuget:?package=Blazor-ApexCharts&version=3.3.0

// Install Blazor-ApexCharts as a Cake Tool
#tool nuget:?package=Blazor-ApexCharts&version=3.3.0

.NET Core

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

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.

Stargazers repo roster for @apexcharts/Blazor-ApexCharts

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (5)

Showing the top 5 NuGet packages that depend on Blazor-ApexCharts:

Package Downloads
KingTech.Web.FormGenerator

Package Description

Fun.Blazor.ApexCharts

Package Description

MoonlightPluginBase

Use this package to install all dependencies a moonlight plugins needs

Candlestick

Stock/Crypto Candlestick Chart Blazor Component.

Undersoft.SDK.Service.Application.GUI

Package Description

GitHub repositories (4)

Showing the top 4 popular GitHub repositories that depend on Blazor-ApexCharts:

Repository Stars
neozhu/CleanArchitectureWithBlazorServer
This is a repository for creating a Blazor Server dashboard application following the principles of Clean Architecture
TabBlazor/TabBlazor
Blazor admin template based on Tabler UI
neozhu/visitormanagement
helps in managing visitors visiting the institutions for various reasons. It allows visitors to check-in digitally to eliminate the tedious registeration and other paperwork. Additionally, it also keeps a track of every individual inside the campus and their timings. Institutions has guards who enter their detail in some notebooks to keep a log which are practically impossible to reconcile. It is really unpleasent and hectic for visitor to stand at the gate and give details about the visit. To ease the process of registeration, Entry-In, Entry-Out, time tracking and logging the history, this VMS can be of great use!!
Corsinvest/cv4pve-admin
Corsinvest for Proxmox VE Web Admin Clusters - vCenter but for Proxmoxm VE
Version Downloads Last updated
3.3.0 20,442 4/28/2024
3.2.0 18,693 4/7/2024
3.1.0 23,617 3/4/2024
3.0.0 367 3/4/2024
2.3.3 31,796 2/9/2024
2.3.2 1,176 2/7/2024
2.3.1 6,988 2/4/2024
2.3.0 3,967 2/1/2024
2.2.1 33,347 12/20/2023
2.2.0 18,947 12/6/2023
2.1.0 19,546 11/19/2023
2.0.0 4,790 11/11/2023
1.3.0 20,153 10/23/2023
1.2.1 21,858 9/24/2023
1.1.1 777 9/23/2023
1.1.0 2,474 9/18/2023
1.0.1 7,377 9/13/2023
1.0.0 3,041 9/12/2023
0.9.22-beta 7,618 8/27/2023
0.9.21-beta 43,719 5/22/2023
0.9.20-beta 43,360 3/27/2023
0.9.19-beta 3,639 3/20/2023
0.9.18-beta 20,785 2/5/2023
0.9.17-beta 11,783 1/7/2023
0.9.16-beta 17,495 11/19/2022
0.9.15-beta 4,745 11/4/2022
0.9.14-beta 16,973 9/19/2022
0.9.13-beta 45,688 7/6/2022
0.9.12-beta 7,781 6/7/2022
0.9.11-beta 1,106 6/3/2022
0.9.10-beta 1,273 5/30/2022
0.9.8-beta 34,335 5/4/2022
0.9.7-beta 2,772 4/14/2022
0.9.6-beta 992 4/10/2022
0.9.5-beta 847 4/5/2022
0.9.4-beta 1,634 4/3/2022
0.9.3-beta 646 4/2/2022
0.9.2-beta 1,332 3/31/2022
0.9.1-beta 1,432 3/30/2022
0.9.0-beta 738 3/30/2022
0.8.2-beta 5,283 3/13/2022
0.8.1-beta 635 3/13/2022
0.8.0-beta 7,185 2/20/2022
0.7.0-beta 2,715 1/24/2022
0.6.1-alpha 1,085 1/18/2022
0.6.0-alpha 9,283 11/7/2021
0.5.0-alpha 2,499 10/10/2021
0.4.1-alpha 1,302 9/27/2021
0.4.0-alpha 4,068 9/7/2021
0.2.4-alpha 3,334 8/19/2021
0.2.3-alpha 5,581 5/5/2021
0.2.2-alpha 2,202 2/13/2021
0.2.1-alpha 741 2/13/2021
0.2.0-alpha 4,108 6/7/2020
0.1.1-alpha 900 5/23/2020
0.1.0-alpha 836 5/23/2020
0.0.4-apha 907 5/10/2020
0.0.3-alpha 891 5/2/2020