Getting started - Joelius300/ChartJSBlazor GitHub Wiki

You should read the Chart.Js documentation to understand how each chart works in detail.

However, here's a few instructions to quickly get started with ChartJs.Blazor:

Create a new Blazor project: In the New Project Dialog choose Visual C# -> Cloud -> ASP.NET Core Web Application, give your project a nice name and in the dialog that pops up select any of the Blazor projects flavors. Let's say you went with the simplest one, without any backend project.
Reference the ChartJsBlazor NuGet package.
In you .razor file, add the following code:

@using ChartJs.Blazor.Charts
@using ChartJs.Blazor.ChartJS.PieChart
@using ChartJs.Blazor.ChartJS.Common.Properties

<h1>Pie Chart</h1>

<ChartJsPieChart @ref="pieChartJs" Config="@config" Width="600" Height="300" />

@code {
private PieConfig config;
private ChartJsPieChart pieChartJs;

protected override void OnInitialized()
{
    config = new PieConfig
    {
        CanvasId = "myFirstPieChart",
        Options = new PieOptions
        {
            Title = new OptionsTitle
            {
                Display = true,
                Text = "Sample chart from Blazor"
            },
            Responsive = true,
            Animation = new DoughnutAnimation
            {
                AnimateRotate = true,
                AnimateScale = true
            }
        }
    };

    config.Data.Labels = new List<string> { "A", "B", "C", "D" };

    var pieSet = new PieDataset
    {
        BackgroundColor = new[] { "#ff6384", "#55ee84", "#4463ff", "#efefef" },
        Data = new List<int> { 4, 5, 6, 7 },                // this will be removed and shouldn't be possible
        Label = "Light Red",
        BorderWidth = 0,
        HoverBackgroundColor = new[] { "#f06384" },
        HoverBorderColor = new[] { "#f06384" },
        HoverBorderWidth = new[] { 1 },
        BorderColor = "#ffffff",
    };

    config.Data.Datasets = new List<PieDataset>();    // this will be removed and shouldn't be possible
    config.Data.Datasets.Add(pieSet);
}
}

In your _Host.cshtml file add this code to have moment.js with the locales:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment-with-locales.min.js"
        integrity="sha256-AdQN98MVZs44Eq2yTwtoKufhnU+uZ7v2kXnD5vqzZVo="
        crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="_content/ChartJs.Blazor.Fork/ChartJsInterop.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" href="_content/ChartJs.Blazor.Fork/ChartJsBlazor.css" />

or this code if you want the bundled version of Chart.Js, but without the locales of moment.js (moment.js itself is then included in the bundle):

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script> <!--Contains moment.js for time axis-->
<script src="_content/ChartJs.Blazor.Fork/ChartJsInterop.js" type="text/javascript" language="javascript"></script>
<link rel="stylesheet" href="_content/ChartJs.Blazor.Fork/ChartJsBlazor.css" />

Disclaimer:

Make sure to include the Blazor _framework-stuff before including the library stuff. Otherwise, you will face the error: Uncaught reference error: "Blazor is not defined at ChartJsInterop.js:5". Checkout the Wiki as well.

Run the Blazor app and marvel at the beauty of ChartJsBlazor.

Hint: Say you want to add some Javascript handlers. Put your Javascript file in the wwwroot folder and reference the Javascript file in the _Host.cshtml file, like you did in step 4.
Hint: You can find examples for the different chart types here.

Getting started - Joelius300/ChartJSBlazor GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️