Skip to content

Commit 629945e

Browse files
authored
Update README.md
1 parent 6512b96 commit 629945e

File tree

1 file changed

+53
-15
lines changed

1 file changed

+53
-15
lines changed

README.md

Lines changed: 53 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
![.NET Core](https://github.com/joadan/Blazor-ApexCharts/workflows/.NET%20Core/badge.svg?branch=master)
23

34

@@ -6,17 +7,19 @@
67
A blazor wrapper for [ApexCharts.js](https://apexcharts.com/)
78
## [Demo](https://apexcharts.github.io/Blazor-ApexCharts)
89

9-
---
10-
11-
## v1.0 Released to production!
1210

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:
1714

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+
```
1819
---
1920

21+
As of version 2.0 javascript interop on WASM is running synchronously for better performance.
22+
2023

2124
## Installation
2225
### Nuget
@@ -28,22 +31,57 @@ dotnet add package Blazor-ApexCharts
2831

2932
## Usage
3033

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-
3934
### Imports
4035
Add a reference to `Blazor-ApexCharts` in your `_Imports.razor`
4136
```csharp
4237
@using ApexCharts;
4338
```
4439

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+
4579
### Chart Options
4680
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/).
4781
82+
## Acknowledgments
83+
Credits to [@thirstyape](https://github.com/thirstyape) for making production release possible.
84+
4885

4986
[![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

Comments
 (0)