1
+
1
2
![ .NET Core] ( https://github.com/joadan/Blazor-ApexCharts/workflows/.NET%20Core/badge.svg?branch=master )
2
3
3
4
6
7
A blazor wrapper for [ ApexCharts.js] ( https://apexcharts.com/ )
7
8
## [ Demo] ( https://apexcharts.github.io/Blazor-ApexCharts )
8
9
9
- ---
10
-
11
- ## v1.0 Released to production!
12
10
13
- Credits to [ @thirstyape ] ( https://github.com/thirstyape ) for pushing it over the edge!
14
-
15
- We have cleaned up the options class in order to align with the js version as much as possible.
16
- It should only be minor changes but if you have any problems just let us know.
11
+ ## v2.0 Released to production!
12
+ It's no longer necessary to manually include javascript files.
13
+ Please ** REMOVE** any references to:
17
14
15
+ ``` html
16
+ <script src =" _content/Blazor-ApexCharts/js/apex-charts.min.js" ></script >
17
+ <script src =" _content/Blazor-ApexCharts/js/blazor-apex-charts.js" ></script >
18
+ ```
18
19
---
19
20
21
+ As of version 2.0 javascript interop on WASM is running synchronously for better performance.
22
+
20
23
21
24
## Installation
22
25
### Nuget
@@ -28,22 +31,57 @@ dotnet add package Blazor-ApexCharts
28
31
29
32
## Usage
30
33
31
- ### Assets
32
- In ` _Host.cshtml ` (server-side) or in ` index.html ` (client-side) add the following lines to the ` body ` tag ** after** the ` _framework ` reference
33
-
34
- ``` html
35
- <script src =" _content/Blazor-ApexCharts/js/apex-charts.min.js" ></script >
36
- <script src =" _content/Blazor-ApexCharts/js/blazor-apex-charts.js" ></script >
37
- ```
38
-
39
34
### Imports
40
35
Add a reference to ` Blazor-ApexCharts ` in your ` _Imports.razor `
41
36
``` csharp
42
37
@using ApexCharts ;
43
38
```
44
39
40
+ ### Your first chart
41
+ ``` csharp
42
+ < ApexChart TItem = " MyData"
43
+ Title = " Sample Data" >
44
+
45
+ < ApexPointSeries TItem = " MyData"
46
+ Items = " Data"
47
+ Name = " Net Profit"
48
+ SeriesType = " SeriesType.Bar"
49
+ XValue = " e => e.Category"
50
+ YValue = " e=> e.NetProfit" / >
51
+
52
+ < ApexPointSeries TItem = " MyData"
53
+ Items = " Data"
54
+ Name = " Revenue"
55
+ SeriesType = " SeriesType.Bar"
56
+ XValue = " e => e.Category"
57
+ YValue = " e=> e.Revenue" / >
58
+ < / ApexChart >
59
+
60
+ @code {
61
+ private List < MyData > Data { get ; set ; } = new ();
62
+ protected override void OnInitialized ()
63
+ {
64
+ Data .Add (new MyData { Category = " Jan" , NetProfit = 12 , Revenue = 33 });
65
+ Data .Add (new MyData { Category = " Feb" , NetProfit = 43 , Revenue = 42 });
66
+ Data .Add (new MyData { Category = " Mar" , NetProfit = 112 , Revenue = 23 });
67
+ }
68
+
69
+ public class MyData
70
+ {
71
+ public string Category { get ; set ; }
72
+ public int NetProfit { get ; set ; }
73
+ public int Revenue { get ; set ; }
74
+ }
75
+ }
76
+ ```
77
+
78
+
45
79
### Chart Options
46
80
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/).
47
81
82
+ ## Acknowledgments
83
+ Credits to [@thirstyape ](https :// github.com/thirstyape) for making production release possible.
84
+
48
85
49
86
[! [Stargazers repo roster for @apexcharts / Blazor - ApexCharts ](https :// reporoster.com/stars/dark/apexcharts/Blazor-ApexCharts)](https://github.com/apexcharts/Blazor-ApexCharts/stargazers)
87
+
0 commit comments