ChartJs component for Blazor

This library is a wrap around Chart.js for using it with Blazor WebAssembly and Blazor Server. The component was built with NET6 until the version 6.0.44. The version 7.0 is for NET7. The version 8.x is for NET8.

Articles

Installation

First, you have to add the component from NuGet. Then, open your index.html or _Host and add at the end of the page the following scripts:

<script src="_content/PSC.Blazor.Components.Chartjs/lib/Chart.js/chart.js"></script>
<script src="_content/PSC.Blazor.Components.Chartjs/Chart.js" type="module"></script>

The first script is the Chart.js library version 3.7.1 because I'm using this version to create the components. You can use other sources for it but maybe you can face issues in other versions.

Then, open your _Imports.razor and add the following:

@using PSC.Blazor.Components.Chartjs
@using PSC.Blazor.Components.Chartjs.Enums
@using PSC.Blazor.Components.Chartjs.Models
@using PSC.Blazor.Components.Chartjs.Models.Common
@using PSC.Blazor.Components.Chartjs.Models.Bar
@using PSC.Blazor.Components.Chartjs.Models.Bubble
@using PSC.Blazor.Components.Chartjs.Models.Doughnut
@using PSC.Blazor.Components.Chartjs.Models.Line
@using PSC.Blazor.Components.Chartjs.Models.Pie
@using PSC.Blazor.Components.Chartjs.Models.Polar
@using PSC.Blazor.Components.Chartjs.Models.Radar
@using PSC.Blazor.Components.Chartjs.Models.Scatter

There is a namespace for each chart plus the common namespaces (Enum, Models and the base).

Add a new chart

On your page you can create a new chart by adding this code

<Chart Config="_config1" @ref="_chart1"></Chart>

In the code section you have to define the variables:

private BarChartConfig _config1;
private Chart _chart1;

Then, you can pass the configuration for the chart into _config1 (in the example code above). For a bar chart, the configuration is

_config1 = new BarChartConfig()
{
    Options = new Options()
    {
        Plugins = new Plugins()
        {
            Legend = new Legend()
            {
                Align = LegendAlign.Center,
                Display = false,
                Position = LegendPosition.Right
            }
        },
        Scales = new Dictionary<string, Axis>()
        {
            {
                Scales.XAxisId, new Axis()
                {
                    Stacked = true,
                    Ticks = new Ticks()
                    {
                        MaxRotation = 0,
                        MinRotation = 0
                    }
                }
            },
            {
                Scales.YAxisId, new Axis()
                {
                    Stacked = true
                }
            }
        }
    }
};

Then, you have to define the Labels and the Datasets like that

_config1.Data.Labels = BarDataExamples.SimpleBarText;
_config1.Data.Datasets.Add(new Dataset()
{
    Label = "Value",
    Data = BarDataExamples.SimpleBar.Select(l => l.Value).ToList(),
    BackgroundColor = Colors.Palette1,
    BorderColor = Colors.PaletteBorder1,
    BorderWidth = 1
});

The result of the code above is this chart

Implemented charts

[x] Bar chart
[x] Line chart
[x] Area
[x] Other charts
- [x] Scatter
- [x] Scatter - Multi axis
- [x] Doughnut
- [x] Pie
- [x] Multi Series Pie
- [x] Polar area
- [x] Radar
- [x] Radar skip points
- [x] Combo bar/line
- [x] Stacked bar/line

Add new values

When a graph is created, it means that the configuration is already defined and the datasets are passed to the chart engine. Without recreating the graph, it is possible to add a new value to a specific dataset and/or add a completely new dataset to the graph.

On your page, create a new chart by adding this code

<Chart Config="_config1" @ref="_chart1"></Chart>

In the code section you have to define the variables:

private LineChartConfig _config1;
private Chart _chart1;

chart1 is the reference to the Chart component and from it, you can access all the functions and properties the component has to offer.

Add a new value

In an existing graph, it is possible to add a single new value to a specific dataset calling AddData function that is available on the chart.

Now, the function AddData allows to add a new value in a specific existing dataset. The definition of AddData is the following

AddData(List<string> labels, int datasetIndex, List<decimal?> data)

For example, using _chart1, the following code adds a new label Test1 to the list of labels, and for the dataset 0 adds a random number.

_chart1.AddData(new List<string?>() { "Test1" }, 0, new List<decimal?>() { rd.Next(0, 200) });

The result is visible in the following screenshot.

chart-addnewdata

Add a new dataset

It is also possible to add a completely new dataset to the graph. For that, there is the function AddDataset. This function requires a new dataset of the same format as the others already existing in the chart.

For example, this code adds a new dataset using LineDataset using some of the properties this dataset has.

private void AddNewDataset()
{
    Random rd = new Random();
    List<decimal?> addDS = new List<decimal?>();
    for (int i = 0; i < 8; i++)
    {
        addDS.Add(rd.Next(i, 200));
    }

    var color = String.Format("#{0:X6}", rd.Next(0x1000000));

    _chart1.AddDataset<LineDataset>(new LineDataset()
        {
            Label = $"Dataset {DateTime.Now}",
            Data = addDS,
            BorderColor = color,
            Fill = false
        });
}

The result of this code is the following screenshot.

chart-addnewdataset

Callbacks

The component has a few callbacks (more in development) to customize your chart. The callbacks are ready to use are:

Tooltip
- Labels
- Titles

How to use it

In the configuration of the chart in your Blazor page, you can add your custom code for each callback. For an example, see the following code.

protected override async Task OnInitializedAsync()
{
    _config1 = new BarChartConfig()
        {
            Options = new Options()
            {
                Responsive = true,
                MaintainAspectRatio = false,
                Plugins = new Plugins()
                {
                    Legend = new Legend()
                    {
                        Align = Align.Center,
                        Display = true,
                        Position = LegendPosition.Right
                    },
                    Tooltip = new Tooltip()
                    {
                        Callbacks = new Callbacks()
                        {
                            Label = (ctx) =>
                            {
                                return new[] { 
                                    $"DataIndex: {ctx.DataIndex}\nDatasetIndex: {ctx.DatasetIndex}" };
                            },
                            Title = (ctx) =>
                            {
                                return new[] { $"This is the value {ctx.Value}" };
                            }
                        }
                    }
                },
                Scales = new Dictionary<string, Axis>()
                {
                    {
                        Scales.XAxisId, new Axis()
                        {
                            Stacked = true,
                            Ticks = new Ticks()
                            {
                                MaxRotation = 0,
                                MinRotation = 0
                            }
                        }
                    },
                    {
                        Scales.YAxisId, new Axis()
                        {
                            Stacked = true
                        }
                    }
                }
            }
        };

For more info, please see my posts on PureSourceCode.com.

Add labels to the chart

I added the chartjs-plugin-datalabels plugin in the component. This plugin shows the labels for each point in each graph. For more details about this plugin, visit its website.

First, in the index.html, we have to add after the chart.js script, another script for this component. It is important to add the scrip

BlazorChartjs

Install / Use

README