Patrick Tucci
Repositories Projects Packages Public Activity Starred Repositories

BlazorChartJS (1.0.2)

Published 2026-03-23 20:48:59 +00:00 by ptucci

Installation

dotnet nuget add source --name ptucci --username your_username --password your_token 
dotnet add package --source ptucci --version 1.0.2 BlazorChartJS

About this package

A Blazor library for creating interactive charts using Chart.js

# BlazorChartJsLibrary

A lightweight Blazor wrapper for Chart.js (v4.4.3) with built-in chart selection and auto color palettes.

Latest tested working version

  • 4.4.3

Overview

BlazorChartJsLibrary exposes three main Blazor chart components:

  • BarChart
  • LineChart
  • PieChart

It also ships with data set models and color palette factories.

Features

  • Server-side and WASM Blazor support
  • Chart.js auto-loading from CDN in JavaScript interop
  • Auto color assignment out-of-the-box
  • Optional chart title and axis titles (bar/line)
  • Line smoothing with tension and interpolation mode

Installation

dotnet add package BlazorChartJs --source https://gitea.averainsights.com/api/packages/ptucci/nuget/index.json

Service registration

In Program.cs add:

using BlazorChartJsLibrary;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
// Registers default color palette provider
builder.Services.AddChartServices();
var app = builder.Build();

Usage examples

Bar chart

@using BlazorChartJsLibrary.Charts
@using BlazorChartJsLibrary.DataSets

<BarChart T=int Data="BarData" Labels="Labels" Title="Sales" XAxisTitle="Months" YAxisTitle="Units" />

@code {
    private BarChartDataSet<int>[] BarData = new[] {
        new BarChartDataSet<int> { Label = "Product A", Data = new[] { 10, 20, 30 } },
        new BarChartDataSet<int> { Label = "Product B", Data = new[] { 5, 15, 25 } }
    };

    private string[] Labels = new[] { "Jan", "Feb", "Mar" };
}

Line chart

<LineChart T=int Data="LineData" Labels="Labels" Title="Trend" XAxisTitle="Month" YAxisTitle="Value" />

@code {
    private LineChartDataSet<int>[] LineData = new[] {
        new LineChartDataSet<int> { Label = "Series 1", Data = new[] { 3, 7, 3 }, Tension = 0.4m, CubicInterpolationMode = InterpolationMode.monotone }
    };

    private string[] Labels = new[] { "Jan", "Feb", "Mar" };
}

Pie chart

<PieChart Data="PieData" Labels="PieLabels" />

@code {
    private string[] PieData = new[] { "45", "25", "30" };
    private string[] PieLabels = new[] { "Apple", "Banana", "Cherry" };
}

Component details

  • ChartBase handles JS interop and lazy Chart.js script loading.
  • BarChart and LineChart require Data and Labels with optional Title, XAxisTitle, YAxisTitle.
  • PieChart requires Data and Labels; inverted indexing for slice colors is auto-applied.

Color palettes

Default palette is provided by DivergentSequentialColorPalette through AddChartServices(). You can swap IColorPaletteFactory registration for custom colors.

Notes

  • Data and Labels are required for all chart types; null/empty triggers ArgumentNullException at render time.
  • Chart.js is loaded from CDN as https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js.

Contributing

  1. Fork the repo
  2. Add tests/examples under BlazorChartJsLibrary/Examples
  3. Submit PR with changelog in README.txt

Dependencies

ID Version Target Framework
Microsoft.AspNetCore.Components.Web 10.0.5 net10.0
Microsoft.AspNetCore.Components.Web 8.0.25 net8.0
Microsoft.AspNetCore.Components.Web 9.0.14 net9.0
Details
NuGet
2026-03-23 20:48:59 +00:00
1
Patrick Tucci
Project Site
Repository Site
56 KiB
Assets (2)
blazorchartjs.1.0.2.nupkg 55 KiB
blazorchartjs.nuspec 1.2 KiB
Versions (3) View all
1.0.2 2026-03-23
1.0.1 2026-03-23
1.0.0 2026-03-23