pax.BlazorChartJs 0.3.1

There is a newer version of this package available.
See the version list below for details.
dotnet add package pax.BlazorChartJs --version 0.3.1                
NuGet\Install-Package pax.BlazorChartJs -Version 0.3.1                
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.3.1" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add pax.BlazorChartJs --version 0.3.1                
#r "nuget: pax.BlazorChartJs, 0.3.1"                
#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.3.1

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

Blazor dotnet wrapper library for ChartJs (v3.9.1)

Getting started

Prerequisites

dotnet 6

Installation

dotnet add package pax.BlazorChartJs

Program.cs: (You can set optional javascript locations here)

    builder.Services.AddChartJs();

Usage

Sample Project pax.BlazorChartJs.sample

<div class="btn-group">
    <button type="button" class="btn btn-primary" @onclick="Randomize">Randomize</button>
    <button type="button" class="btn btn-primary" @onclick="AddDataset">Add Dataset</button>
    <button type="button" class="btn btn-primary" @onclick="AddData">Add Data</button>
    <button type="button" class="btn btn-primary" @onclick="RemoveLastDataset">Remove Dataset</button>
    <button type="button" class="btn btn-primary" @onclick="RemoveLastDataFromDatasets">Remove Data</button>
</div>

<div class="w-75">
    <ChartComponent @ref="chartComponent" OnEventTriggered="LabelClicked" ChartJsConfig="chartJsConfig"></ChartComponent>
</div>

<div>
    @if (!String.IsNullOrEmpty(labelClicked))
    {
        <p>
            Label clicked: @labelClicked
        </p>
    }
</div>

@code {
    ChartComponent? chartComponent;
    ChartJsConfig chartJsConfig = null!;
    private string? labelClicked;

    protected override void OnInitialized()
    {
        chartJsConfig = new()
            {
                Type = ChartType.bar,
                Data = new ChartJsData()
                {
                    Labels = new List<string>()
                    {
                        "Red", "Blue", "Yellow", "Green", "Purple", "Orange"
                    },
                    Datasets = new List<ChartJsDataset>()
                    {
                        new BarDataset()
                        {
                            Label = "# of Votes",
                            Data = new List<object>() { 12, 19, 3, 5, 2, 3 },
                            BackgroundColor = new IndexableOption<string>(new List<string>()
                            {
                                "rgba(255, 99, 132, 0.2)",
                                "rgba(54, 162, 235, 0.2)",
                                "rgba(255, 206, 86, 0.2)",
                                "rgba(75, 192, 192, 0.2)",
                                "rgba(153, 102, 255, 0.2)",
                                "rgba(255, 159, 64, 0.2)",
                            }),
                            BorderColor = new IndexableOption<string>(new List<string>()
                            {
                                "rgba(255, 99, 132, 1)",
                                "rgba(54, 162, 235, 1)",
                                "rgba(255, 206, 86, 1)",
                                "rgba(75, 192, 192, 1)",
                                "rgba(153, 102, 255, 1)",
                                "rgba(255, 159, 64, 1)",
                            }),
                            BorderWidth = new IndexableOption<double>(1)
                        }
                    }
                },
                Options = new ChartJsOptions()
                {
                    Responsive = true,
                    MaintainAspectRatio = true,
                    OnClickEvent = true,
                    Scales = new ChartJsOptionsScales()
                    {
                        Y = new LinearAxis()
                        {
                            SuggestedMax = 25
                        }
                    }
                }
            };
        base.OnInitialized();
    }

    private void LabelClicked(ChartJsEvent chartJsEvent)
    {
        var data = chartJsEvent.EventData as LabelEventData;
        labelClicked = data?.Label;
    }

    private void AddData()
    {
        var dataAddEventArgs = ChartUtils.GetRandomData(chartJsConfig.Data.Datasets.Count);
        chartJsConfig.AddData(dataAddEventArgs.Label, dataAddEventArgs.Data, dataAddEventArgs.BackgroundColors, dataAddEventArgs.BorderColors);
    }

    private void Randomize()
    {
        var data = ChartUtils.GetRandomData(chartJsConfig.Data.Datasets.Count, chartJsConfig.Data.Labels.Count, -100, 100);

        Dictionary<ChartJsDataset, IList<object>> chartData = new();

        for (int i = 0; i < chartJsConfig.Data.Datasets.Count; i++)
        {
            var dataset = chartJsConfig.Data.Datasets.ElementAt(i);
            var dataList = data.ElementAt(i);
            chartData.Add(dataset, dataList);
        }
        chartJsConfig.SetData(chartData);
    }

    private void AddDataset()
    {
        var dataset = ChartUtils.GetRandomDataset(chartJsConfig.Type == null ? ChartType.bar : chartJsConfig.Type.Value, chartJsConfig.Data.Datasets.Count + 1, chartJsConfig.Data.Labels.Count);
        chartJsConfig.AddDataset(dataset);
    }

    private void RemoveLastDataset()
    {
        if (chartJsConfig.Data.Datasets.Any())
        {
            chartJsConfig.RemoveDataset(chartJsConfig.Data.Datasets.Last());
        }
    }

    private void RemoveLastDataFromDatasets()
    {
        chartJsConfig.RemoveData();
    }
}

Supported Plugins

Known Limitations / ToDo

  • Callbacks
  • InteractionModes
  • DataDecimation

ChangeLog

<details open="open"><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 301 10/19/2024
0.8.4 457 8/24/2024
0.8.3 1,656 3/4/2024
0.8.3-rc1 91 2/29/2024
0.8.2 1,201 12/6/2023
0.8.1 209 11/28/2023
0.8.0 145 11/28/2023 0.8.0 is deprecated because it has critical bugs.
0.8.0-rc2.0 84 11/15/2023
0.8.0-rc1.0 93 10/17/2023
0.6.3 229 11/28/2023
0.6.2 141 11/28/2023 0.6.2 is deprecated because it has critical bugs.
0.6.1 1,546 9/11/2023
0.6.0 602 8/28/2023
0.5.2 144 8/25/2023
0.5.1 1,472 4/28/2023
0.5.0 4,146 2/4/2023
0.5.0-rc2.0 111 2/3/2023
0.5.0-rc1.0 107 2/3/2023
0.4.1 637 1/8/2023
0.4.0 642 11/4/2022
0.3.5 494 10/13/2022
0.3.4 1,559 9/30/2022
0.3.3 421 9/28/2022
0.3.2 462 9/15/2022
0.3.1 407 9/10/2022
0.3.0 410 9/6/2022
0.2.0 409 9/5/2022
0.1.3 423 8/31/2022