Mint.Software.Blazor.Chart.Pack 1.0.3

# 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); } ```