Erkan.Blazor.Chartjs

A Chart.js wrapper for Blazor WebAssembly and Blazor Server, targeting .NET 10 and Chart.js 4.5.1.

▶ Live demo

Every chart type, plus zoom, annotations, time axes and callbacks, running in the browser. Source in ChartjsDemo/.

This is a fork of erossini/BlazorChartjs (PSC.Blazor.Components.Chartjs) by Enrico Rossini, published independently as Erkan.Blazor.Chartjs. It is MIT licensed, same as upstream.

Installation

dotnet add package Erkan.Blazor.Chartjs

Then open your index.html or _Host and add at the end of the page:

<!-- required -->
<script src="_content/Erkan.Blazor.Chartjs/lib/Chart.js/chart.umd.js"></script>

<!-- optional, add only what you use -->
<script src="_content/Erkan.Blazor.Chartjs/lib/moment/moment-with-locales.min.js"></script>
<script src="_content/Erkan.Blazor.Chartjs/lib/chartjs-adapter-moment/chartjs-adapter-moment.min.js"></script>
<script src="_content/Erkan.Blazor.Chartjs/lib/hammer.js/hammer.js"></script>
<script src="_content/Erkan.Blazor.Chartjs/lib/chartjs-plugin-zoom/chartjs-plugin-zoom.js"></script>
<script src="_content/Erkan.Blazor.Chartjs/lib/chartjs-plugin-datalabels/chartjs-plugin-datalabels.js"></script>
<script src="_content/Erkan.Blazor.Chartjs/lib/chartjs-plugin-annotation/chartjs-plugin-annotation.min.js"></script>

moment must come before the moment adapter, and chart.umd.js before every plugin. The interop module (_content/Erkan.Blazor.Chartjs/Chart.js) is imported on demand — do not add a <script> tag for it.

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

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

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

Quick start

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 = Align.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 = new List<string>
    { "January", "February", "March", "April", "May", "June" };

_config1.Data.Datasets.Add(new BarDataset()
{
    Label = "Value",
    Data = new List<decimal?> { 65, 59, 80, 81, 56, 55 },
    BackgroundColor = new List<string>
    {
        "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)",
        "rgba(75, 192, 192, 0.2)", "rgba(54, 162, 235, 0.2)", "rgba(153, 102, 255, 0.2)"
    },
    BorderColor = new List<string>
    {
        "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)",
        "rgb(75, 192, 192)", "rgb(54, 162, 235)", "rgb(153, 102, 255)"
    },
    BorderWidth = 1
});

The dataset type has to match the config: BarChartConfig.Data.Datasets is a List<BarDataset>, LineChartConfig's is a List<LineDataset>, and so on. The base Dataset type carries only Label, Data, DataLabels, Order and Type — colours and widths live on the per-chart subclasses.

The result of the code above is this chart

Implemented charts

For what each type's model actually exposes, and where it stops, see Feature coverage.

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

Documentation

• Feature coverage — what Chart.js 4.5.1 offers against what the C# models expose, and the escape hatches where they stop
• Upgrading — from Erkan.Blazor.Chartjs 1.0.0, and from upstream PSC.Blazor.Components.Chartjs
• Updating data — AddData, AddDataset<T> and ClearData on a chart that has already rendered
• Callbacks and events — tooltip, tick and legend callbacks, OnClickAsync, OnHoverAsync and the component's event parameters
• Chart options — size and aspect ratio, layout padding, hover and the events a chart listens to
• Styling — legend label styling, the tooltip's placement and layout, the chart's own colours, the default colour palette, line dataset styling (dashes, gaps, point colours, step modes) and the axis border
• Plugins — data labels, zoom and pan, and attaching any other Chart.js plugin with RegisterPlugins
• Extra options — ExtraOptions, for the Chart.js options the models have no property for
• Changelog

Links

• Live demo for this fork
• Source code on GitHub
• NuGet package
• Upstream project by Enrico Rossini: erossini/BlazorChartjs · upstream demo site · upstream docs

Contribution

Contributors to the upstream project, whose work this fork inherits:

• macias for adding the crosshair line to the components
• Heitor Eleutério de Rezende for the migration to NET7 and adding:
  • Legend Labels Filtering
  • Support to Ticks' AutoSkip and Font properties
  • Tooltip Callback Label problem fixed.
  • Ticks callback

Credits

Original project by Enrico Rossini — erossini/BlazorChartjs, documented on PureSourceCode.com. Nearly all of the component's design and the bulk of its code are his.

Parts of the original code were taken from ChartJs.Blazor by Marius Muntean, Joel L. and the ChartJs.Blazor contributors, which is MIT licensed; their copyright notice is in LICENSE.

This fork is maintained by erkantaylan and released under the same MIT license. It is not affiliated with or endorsed by PureSourceCode; please raise issues with this fork at erkantaylan/BlazorChartjs rather than upstream.

License

MIT. See LICENSE.