Getting started

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

Imported JS no longer pollutes the global namespace.
Consumers of a library and components aren't required to import the related JS.

Prerequisites

dotnet 6

Installation

dotnet add package pax.BlazorChartJs

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

<div class="btn-group">
    <button type="button" class="btn btn-primary" @onclick="Randomize">Randomize</button>
</div>
<div class="w-75 h-50">
    <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 = new List<string>() { "Jan", "Feb", "Mar" },
                Datasets = new List<ChartJsDataset>()
                {
                    new BarDataset()
                    {
                        Label = "Dataset 1",
                        Data = new List<object>() { 1, 2, 3 }
                    }
                }
            }
        };
        base.OnInitialized();
    }

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

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

        Random random = new();
        Dictionary<ChartJsDataset, SetDataObject> chartData = new();

        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.Next(1, 10));
                }
                chartData[dataset] = new(newData);
            }
        }
        chartJsConfig.SetData(chartData);
    }
}

pax77/pax.BlazorChartJsv0.5.0

Get Started

Readme

Getting started

Prerequisites

Installation

Usage

Update Chart

Chart Events

Supported Plugins

ChartComponent

ChangeLog