Mint.Software.Blazor.Chart.Pack 1.0.0
# Mint.Software.Blazor.Chart
Blazor library that wraps Chart.js
## Usage
### Assets
Before you can start creating a chart, you have to add some static assets to your project.
In your `_Host.cshtml` (server-side) or in your `index.html` (client-side) add the following lines to the `body` tag **after** the `_framework` reference.
```html
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
<!-- This is the glue between Blazor and Chart.js -->
<script src="_content/ChartJs.Blazor.Fork/ChartJsBlazorInterop.js"></script>
```
If you are using a time scale (`TimeAxis`), you also need to include Moment.js **before** including Chart.js.
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
```njs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
### Imports
Now add a reference to `ChartJs.Blazor` in your `_Imports.razor`.
```csharp
@using Mint.Software.Blazor.Chart;
```
Other commonly used namespaces which you might want to import globally are:
- `@using Mint.Software.Blazor.Chart.Common`
- `@using Mint.Software.Blazor.Chart.Common.Axes`
- `@using Mint.Software.Blazor.Chart.Common.Axes.Ticks`
- `@using Mint.Software.Blazor.Chart.Common.Enums`
- `@using Mint.Software.Blazor.Chart.Common.Handlers`
- `@using Mint.Software.Blazor.Chart.Common.Time`
- `@using Mint.Software.Blazor.Chart.Util`
- `@using Mint.Software.Blazor.Chart.Interop`
### Chart
```csharp
private PieConfig _config;
protected override void OnInitialized()
{
_config = new PieConfig
{
Options = new PieOptions
{
Responsive = true,
Title = new OptionsTitle
{
Display = true,
Text = "ChartJs.Blazor Pie Chart"
}
}
};
foreach (string color in new[] { "Red", "Yellow", "Green", "Blue" })
{
_config.Data.Labels.Add(color);
}
PieDataset<int> dataset = new PieDataset<int>(new[] { 6, 5, 3, 7 })
{
BackgroundColor = new[]
{
ColorUtil.ColorHexString(255, 99, 132), // Slice 1 aka "Red"
ColorUtil.ColorHexString(255, 205, 86), // Slice 2 aka "Yellow"
ColorUtil.ColorHexString(75, 192, 192), // Slice 3 aka "Green"
ColorUtil.ColorHexString(54, 162, 235), // Slice 4 aka "Blue"
}
};
_config.Data.Datasets.Add(dataset);
}
```
No packages depend on Mint.Software.Blazor.Chart.Pack.
.NET Standard 2.1
- Microsoft.AspNetCore.Components (>= 3.1.6)
- Microsoft.AspNetCore.Components.Web (>= 3.1.6)
- Microsoft.CSharp (>= 4.7.0)
- Newtonsoft.Json (>= 12.0.3)