Skip to content

Commit

Permalink
Updated the docs to reflect the new API change
Browse files Browse the repository at this point in the history
  • Loading branch information
mariusmuntean committed Jun 2, 2020
1 parent c55b571 commit 751354f
Showing 1 changed file with 12 additions and 6 deletions.
18 changes: 12 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ Don't know what Blazor is? Read [here](https://dotnet.microsoft.com/apps/aspnet/
You need an IDE that supports Blazor and .Net Core SDK 3.x+

1. [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) (Community Edition is fine) or [VisualStudio for Mac](https://visualstudio.microsoft.com/vs/mac/) or [Jetbrains Rider](https://www.jetbrains.com/rider/)
2. [.NET Core 3.0](https://dotnet.microsoft.com/download/dotnet-core/3.0)
2. [.NET Core 3.0](https://dotnet.microsoft.com/download/dotnet-core/3.0) or newer


## Installation
Expand Down Expand Up @@ -84,15 +84,19 @@ Then add a few `@using` statements
@using ChartJs.Blazor.Util
```

Below the `@using` statements add a `ChartJsPieChart` component
Below the `@using` statements add a `Chart` component
```html
<ChartJsPieChart @ref="_pieChartJs" Config="@_config" Width="600" Height="300"/>
<Chart @ref="_pieChartJs"
Config="@_config"
TConfig="PieConfig"
Width="600"
Height="300"/>
```
The last step is to make the `ChartJsPieChart` from above, reachable from your code to configure it and to give it some data to display. In the `@code` section of your .razor file create matching variables to reference the chart and its configuration. Finally, give your chart a title and some data. The finished code should look like this:
The last step is to make the `Chart` from above, reachable from your code to configure it and to give it some data to display. In the `@code` section of your .razor file create matching variables to reference the chart and its configuration. Finally, give your chart a title and some data. The finished code should look like this:

```csharp
private PieConfig _config;
private ChartJsPieChart _pieChartJs;
private Chart<PieConfig> _pieChartJs;

protected override void OnInitialized()
{
Expand Down Expand Up @@ -137,7 +141,9 @@ First, in your `Index.html`/`_Host.cshtml` you've added references to static as

Then, you've imported `ChartJs.Blazor` in your `_Imports.razor`. The Blazor Team mentioned that this shouldn't be necessary in the future.

In your .razor file you added the `ChartJsPieChart` component and gave it some width and height. You specified that the component should use the variable `_config`` as the chart's configuration object. You also told Blazor that you want a direct reference to the chart and that the reference should be saved in your `_pieChartJs`` variable.
In your .razor file you added the `Chart` component and gave it some width and height. You specified that the component should use the variable `_config` as the chart's configuration object. You also told Blazor that you want a direct reference to the chart and that the reference should be saved in your `_pieChartJs` variable.

Note: for the moment you need to explicitly specify the type of the configuration object `TConfig="PieConfig"`. That won't be necessary in the future.

When your page's `OnInitialized()` method is executed you're setting the chart's configuration and dataset to be displayed.

Expand Down

0 comments on commit 751354f

Please sign in to comment.