Home

Awesome

Nuget Playwright Tests TestPage

Blazor dotnet wrapper library for ChartJs

The following versions of ChartJs are compatible with published releases of pax.BlazorChartJs

ReleaseChartJsTests
<= 0.5.03.9.13.9.1
>= 0.5.04.x4.4.4

Getting started

This library is using JavaScript isolation. JS isolation provides the following benefits:

Prerequisites

Installation

dotnet 8

dotnet add package pax.BlazorChartJs

dotnet 6/7

dotnet add package pax.BlazorChartJs --version 0.6.3

Program.cs:

    builder.Services.AddChartJs(options =>
    {
        // default
        options.ChartJsLocation = "https://cdn.jsdelivr.net/npm/chart.js";
        options.ChartJsPluginDatalabelsLocation = "https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2";
    });

Usage

Sample Project pax.BlazorChartJs.samplelib with Sample Chart

@using pax.BlazorChartJs

<div class="btn-group">
    <button type="button" class="btn btn-primary" @onclick="Randomize">Randomize</button>
</div>
<div class="chart-container w-75">
    <ChartComponent @ref="chartComponent"
                    ChartJsConfig="chartJsConfig"
                    OnEventTriggered="ChartEventTriggered">
    </ChartComponent>
</div>

@code {
    ChartJsConfig chartJsConfig = null!;
    ChartComponent? chartComponent;
    private bool chartReady;

    protected override void OnInitialized()
    {
        chartJsConfig = new ChartJsConfig()
            {
                Type = ChartType.bar,
                Data = new ChartJsData()
                {
                    Labels = ["Jan", "Feb", "Mar"],
                    Datasets = new List<ChartJsDataset>()
                    {
                        new BarDataset()
                        {
                            Label = "Dataset 1",
                            Data = [ 1, 2, 3 ]
                        }
                    }
                }
            };
        base.OnInitialized();
    }

    private void ChartEventTriggered(ChartJsEvent chartJsEvent)
    {
        if (chartJsEvent is ChartJsInitEvent initEvent)
        {
            chartReady = true;
        }
    }

    private void Randomize()
    {
        if (!chartReady)
        {
            return;
        }

        List<ChartJsDataset> updateDatasets = [];
        
        foreach (var dataset in chartJsConfig.Data.Datasets)
        {
            if (dataset is BarDataset barDataset)
            {
                List<object> newData = new();
                foreach (var data in barDataset.Data)
                {
                    newData.Add(Random.Shared.Next(1, 10));
                }
                barDataset.Data = newData;
                updateDatasets.Add(dataset);
            }
        }
        chartJsConfig.UpdateDatasetsSmooth(updateDatasets);
    }
}

Update Chart

Chart Events

Several chart events are available, by default only the Init event is fired. The others can be activated in the ChartJsConfig.Options Sample

Supported Plugins

ChartComponent

Several chart functions are available in the ChartComponent, e.g.:

Contributing

We really like people helping us with the project. Nevertheless, take your time to read our contributing guidelines here.

ChangeLog

<details open="open"><summary>v0.8.4</summary>
</details> <details><summary>v0.8.3</summary> 
    BorderColor = ["rgba(255, 99, 132, 1)", "rgba(54, 162, 235, 1)"],
    BorderWidth = [1, 2]
</details> <details><summary>v0.8.2</summary>
</details> <details><summary>v0.8.1</summary>

New Syntax:

BorderColor = new List<string>()
{
    "rgba(255, 99, 132, 1)",
    "rgba(54, 162, 235, 1)"
},
BorderWidth = 1

Old Syntax (still possible):

BorderColor = new IndexableOption<string>(new List<string>()
{
    "rgba(255, 99, 132, 1)",
    "rgba(54, 162, 235, 1)"
}),
BorderWidth = new IndexableOption<double>(1)
</details> <details><summary>v0.6.3</summary>
</details> <details><summary>v0.6.2</summary>

New Syntax:

BorderColor = new List<string>()
{
    "rgba(255, 99, 132, 1)",
    "rgba(54, 162, 235, 1)"
},
BorderWidth = 1

Old Syntax (still possible):

BorderColor = new IndexableOption<string>(new List<string>()
{
    "rgba(255, 99, 132, 1)",
    "rgba(54, 162, 235, 1)"
}),
BorderWidth = new IndexableOption<double>(1)
</details> <details><summary>v0.6.1</summary>
</details> <details><summary>v0.6.0</summary>
</details> <details><summary>v0.5.2</summary>
</details> <details><summary>v0.5.1</summary>
</details> <details><summary>v0.5.0</summary>
</details>