pax.BlazorChartJs 0.5.2

There is a newer version of this package available.
See the version list below for details.
dotnet add package pax.BlazorChartJs --version 0.5.2                
NuGet\Install-Package pax.BlazorChartJs -Version 0.5.2                
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="pax.BlazorChartJs" Version="0.5.2" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add pax.BlazorChartJs --version 0.5.2                
#r "nuget: pax.BlazorChartJs, 0.5.2"                
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
// Install pax.BlazorChartJs as a Cake Addin
#addin nuget:?package=pax.BlazorChartJs&version=0.5.2

// Install pax.BlazorChartJs as a Cake Tool
#tool nuget:?package=pax.BlazorChartJs&version=0.5.2                

Nuget Playwright Tests TestPage

Blazor dotnet wrapper library for ChartJs

The following versions of ChartJs are compatible with published releases of pax.BlazorChartJs Release | ChartJs | Tests ---|---------------|---------------| ⇐ 0.5.0 | 3.9.1 | 3.9.1 >= 0.5.0 | 4.x | 4.4.0

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

Update Chart

  • To update the chart with the current ChartJsConfig call ChartJsConfig.ReinitializeChart()
  • To update the chart with smooth animations there are several helper functions available, e.g.:
    • ChartJsConfig.SetLabels(...)
    • ChartJsConfig.AddData(...)
    • ChartJsConfig.AddDataset(...)
    • ChartJsConfig.SetData(...)
  • use ChartJsConfig.UpdateChartOptions() to update the chart options, only (e.g. StepSize)

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

  • click
  • hover
  • leave
  • progress
  • complete
  • resize

Supported Plugins

ChartComponent

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

  • ChartComponent.ResizeChart(...)
  • ChartComponent.GetChartImage(...)
  • ChartComponent.ToggleDataVisibility(...)

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.5.2</summary>

  • Datalabels per dataset contributed by pjvinson
  • ChartJs v4.4.0 tests

</details>

<details><summary>v0.5.1</summary>

  • Marked ChartJsGrid border options as obsolete for v4.x - use ChartJsAxisBorder instead.
  • TimeSeriesAxis Min, Max, SuggestedMin and SuggestedMax are of type StringOrDoubleValue, now.
  • Microsoft.AspNetCore.Components.Web upgrade to v6.0.16
  • ChartJs v4.3.0 tests
  • ChartJs v4.3.1 tests
  • ChartJs v4.3.3 tests

</details>

<details><summary>v0.5.0</summary>

  • Breaking Changes
  • Update to ChartJs v4.x
  • Removed ChartJs javascript files - defaults to cdn links, now. Use options.ChartJsLocation = "mychart.js" to use a custom/local ChartJs version.
  • Removed chartjs-plugin-labels (you can still register it as custom plugin)
  • Microsoft.AspNetCore.Components.Web upgrade to v6.0.13
  • Added ScaleAxis X1 and Y1 (override ChartJsOptionsScales for other names)
  • ChartJsConfig.UpdateChartOptions() (will replace ChartComponent.UpdateChartOptions)
  • ChartJsConfig.ReinitializeChart() (will replace ChartComponent.DrawChart)

</details>

<details><summary>v0.4.1</summary>

  • Catch ObjectDisposedException and JSException when disposing the ChartComponent while initializing
  • Microsoft.AspNetCore.Components.Web upgrade to v6.0.12

</details>

<details><summary>v0.4.0</summary>

  • Title.Text is now IndexableOptions<string> - Breaking Change!
  • chartComponent?.DrawChart() triggeres an InitEvent after the chart is complete
  • ChartJsInitEvent does have the ChartJsConfigGuid set correctly, now
  • RemoveDataset(s) can now handle self referencing and missing

</details>

<details><summary>v0.3.5</summary>

  • TimeCartesianAxisTicks fix
  • Interactions fix
  • Playwright tests
  • ghpages
  • ChartComponent DisposeAsync

</details>

<details><summary>v0.3.4</summary>

  • Fix #7 - Axis Ticks JsonConverter
  • Added ChartJsInitEvent which is triggered when the chart finished initializing the first time
  • StackedChart Sample

</details>

<details><summary>v0.3.3</summary>

  • Fix #6
  • chartComponent.UpdateChartDatasets removed - use chartConfig.SetDatasets() instead
  • Added Hidden option for Datasets

</details>

<details><summary>v0.3.2</summary>

  • Chart update refactoring - Breaking Changes!
  • Chart events refactoring - Breaking Changes!
  • Typescript
  • NuGet udpates

</details>

<details><summary>v0.3.1</summary>

  • Time Scale Chart
  • Optional javascript location options
  • ChartJs API calls
  • bugfixes
  • refactoring

</details>

<details><summary>v0.3.0</summary>

  • IndexableOption - Breaking Change!

</details>

<details><summary>v0.2.0</summary>

  • Events
  • Custom Plugin Sample
  • ChartJs API calls

</details>

<details><summary>v0.1.3</summary>

  • Nuget Package

</details>

<details><summary>v0.1.2</summary>

  • RadarChart

</details>

<details><summary>v0.1.1</summary>

  • Readme

</details>

<details><summary>v0.1.0</summary>

  • Init

</details>

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
0.8.5 256 10/19/2024
0.8.4 428 8/24/2024
0.8.3 1,626 3/4/2024
0.8.3-rc1 89 2/29/2024
0.8.2 1,198 12/6/2023
0.8.1 207 11/28/2023
0.8.0 143 11/28/2023 0.8.0 is deprecated because it has critical bugs.
0.8.0-rc2.0 82 11/15/2023
0.8.0-rc1.0 91 10/17/2023
0.6.3 220 11/28/2023
0.6.2 139 11/28/2023 0.6.2 is deprecated because it has critical bugs.
0.6.1 1,489 9/11/2023
0.6.0 600 8/28/2023
0.5.2 142 8/25/2023
0.5.1 1,470 4/28/2023
0.5.0 4,059 2/4/2023
0.5.0-rc2.0 109 2/3/2023
0.5.0-rc1.0 105 2/3/2023
0.4.1 635 1/8/2023
0.4.0 640 11/4/2022
0.3.5 492 10/13/2022
0.3.4 1,557 9/30/2022
0.3.3 419 9/28/2022
0.3.2 460 9/15/2022
0.3.1 405 9/10/2022
0.3.0 408 9/6/2022
0.2.0 407 9/5/2022
0.1.3 421 8/31/2022