Blazor-ApexCharts
3.4.0
dotnet add package Blazor-ApexCharts --version 3.4.0
NuGet\Install-Package Blazor-ApexCharts -Version 3.4.0
<PackageReference Include="Blazor-ApexCharts" Version="3.4.0" />
paket add Blazor-ApexCharts --version 3.4.0
#r "nuget: Blazor-ApexCharts, 3.4.0"
// Install Blazor-ApexCharts as a Cake Addin #addin nuget:?package=Blazor-ApexCharts&version=3.4.0 // Install Blazor-ApexCharts as a Cake Tool #tool nuget:?package=Blazor-ApexCharts&version=3.4.0
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.
Product | Versions 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. |
-
net6.0
- Microsoft.AspNetCore.Components (>= 6.0.25)
- Microsoft.AspNetCore.Components.Web (>= 6.0.25)
-
net7.0
- Microsoft.AspNetCore.Components (>= 7.0.14)
- Microsoft.AspNetCore.Components.Web (>= 7.0.14)
-
net8.0
- Microsoft.AspNetCore.Components (>= 8.0.2)
- Microsoft.AspNetCore.Components.Web (>= 8.0.2)
NuGet packages (6)
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 |
|
Undersoft.SDK.Service.Application.GUI
Package Description |
|
Candlestick
Stock/Crypto Candlestick Chart Blazor Component. |
GitHub repositories (6)
Showing the top 5 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
|
|
TheAxelander/OpenBudgeteer
OpenBudgeteer is a budgeting app based on the Bucket Budgeting Principle
|
|
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!!
|
|
CervantesSec/cervantes
Cervantes is an open-source, collaborative platform designed specifically for pentesters and red teams. It serves as a comprehensive management tool, streamlining the organization of projects, clients, vulnerabilities, and reports in a single, centralized location.
|
Version | Downloads | Last updated |
---|---|---|
3.4.0 | 20,244 | 7/15/2024 |
3.3.0 | 57,440 | 4/28/2024 |
3.2.0 | 27,048 | 4/7/2024 |
3.1.0 | 30,630 | 3/4/2024 |
3.0.0 | 400 | 3/4/2024 |
2.3.3 | 42,562 | 2/9/2024 |
2.3.2 | 1,190 | 2/7/2024 |
2.3.1 | 7,750 | 2/4/2024 |
2.3.0 | 5,952 | 2/1/2024 |
2.2.1 | 38,039 | 12/20/2023 |
2.2.0 | 23,610 | 12/6/2023 |
2.1.0 | 20,980 | 11/19/2023 |
2.0.0 | 5,178 | 11/11/2023 |
1.3.0 | 23,600 | 10/23/2023 |
1.2.1 | 22,652 | 9/24/2023 |
1.1.1 | 784 | 9/23/2023 |
1.1.0 | 2,714 | 9/18/2023 |
1.0.1 | 7,980 | 9/13/2023 |
1.0.0 | 3,172 | 9/12/2023 |
0.9.22-beta | 7,771 | 8/27/2023 |
0.9.21-beta | 46,238 | 5/22/2023 |
0.9.20-beta | 47,955 | 3/27/2023 |
0.9.19-beta | 3,738 | 3/20/2023 |
0.9.18-beta | 21,000 | 2/5/2023 |
0.9.17-beta | 12,291 | 1/7/2023 |
0.9.16-beta | 18,435 | 11/19/2022 |
0.9.15-beta | 4,800 | 11/4/2022 |
0.9.14-beta | 17,411 | 9/19/2022 |
0.9.13-beta | 47,121 | 7/6/2022 |
0.9.12-beta | 7,825 | 6/7/2022 |
0.9.11-beta | 1,122 | 6/3/2022 |
0.9.10-beta | 1,282 | 5/30/2022 |
0.9.8-beta | 34,752 | 5/4/2022 |
0.9.7-beta | 2,789 | 4/14/2022 |
0.9.6-beta | 998 | 4/10/2022 |
0.9.5-beta | 854 | 4/5/2022 |
0.9.4-beta | 1,649 | 4/3/2022 |
0.9.3-beta | 653 | 4/2/2022 |
0.9.2-beta | 1,382 | 3/31/2022 |
0.9.1-beta | 1,724 | 3/30/2022 |
0.9.0-beta | 743 | 3/30/2022 |
0.8.2-beta | 5,632 | 3/13/2022 |
0.8.1-beta | 642 | 3/13/2022 |
0.8.0-beta | 7,196 | 2/20/2022 |
0.7.0-beta | 2,721 | 1/24/2022 |
0.6.1-alpha | 1,091 | 1/18/2022 |
0.6.0-alpha | 9,359 | 11/7/2021 |
0.5.0-alpha | 2,507 | 10/10/2021 |
0.4.1-alpha | 1,306 | 9/27/2021 |
0.4.0-alpha | 4,075 | 9/7/2021 |
0.2.4-alpha | 3,541 | 8/19/2021 |
0.2.3-alpha | 5,705 | 5/5/2021 |
0.2.2-alpha | 2,207 | 2/13/2021 |
0.2.1-alpha | 746 | 2/13/2021 |
0.2.0-alpha | 4,340 | 6/7/2020 |
0.1.1-alpha | 905 | 5/23/2020 |
0.1.0-alpha | 842 | 5/23/2020 |
0.0.4-apha | 911 | 5/10/2020 |
0.0.3-alpha | 895 | 5/2/2020 |