ChartJs.Blazor 0.3.0-alpha

This is a prerelease version of ChartJs.Blazor.
There is a newer version of this package available.
See the version list below for details.
Install-Package ChartJs.Blazor -Version 0.3.0-alpha
dotnet add package ChartJs.Blazor --version 0.3.0-alpha
<PackageReference Include="ChartJs.Blazor" Version="0.3.0-alpha" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add ChartJs.Blazor --version 0.3.0-alpha
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: ChartJs.Blazor, 0.3.0-alpha"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install ChartJs.Blazor as a Cake Addin
#addin nuget:?package=ChartJs.Blazor&version=0.3.0-alpha&prerelease

// Install ChartJs.Blazor as a Cake Tool
#tool nuget:?package=ChartJs.Blazor&version=0.3.0-alpha&prerelease
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

ChartJs interop with Blazor

Need you opinion

Vote on what features you'd like to see implemented next Link to Poll

This is a Blazor Component that wraps ChartJS. It was based on this repo:



  • Updated object model that exposes even more features of ChartJs
  • Added support for Polar Area Chart </details>


  • Updated object model that exposes more features of ChartJs </details>


  • Initial release.
  • Support for almost all charts from ChartJs, including: LineChart, BarChart, RadarCart, Doughnut- and Pie-Chart, BubbleChart, MixedChart </details>

Please keep in mind that this is still a preview. Expect breaking changes during the next 2, 3 releases. I'm using this opportunity to learn Blazor.


Don't know what Blazor is? Read here


  1. Visual Studio 15.8 or later
  2. DotNetCore 2.1.402 or later


There's a NuGet package:

Install from the command line:

Install-Package ChartJs.Blazor


dotnet add package ChartJs.Blazor


  1. In you cshtlm create a new ChartJsPieChart and give it an instance of PieChartConfig ...
<h2>Chart JS charts using Blazor</h2>
<div class="row">
    <button class="btn btn-primary" onclick="@UpdateChart">Update Chart </button>
<ChartJsPieChart ref="pieChartJs" Config="@pieChartConfig" Width="600" Height="300"/>

... make sure to create that instance


    private PieChartConfig pieChartConfig { get; set; }
    ChartJsPieChart pieChartJs;

    protected override void OnInit()
        pieChartConfig = pieChartConfig ?? new PieChartConfig
            CanvasId = "myFirstPieChart",
            Options = new PieChartOptions
                Text = "Sample chart from Blazor",
                Display = true,
                Responsive = true,
                Animation = new PieChartAnimation {AnimateRotate = true, AnimateScale = true}
            Data = new PieChartData
                Labels = new List<string> {"A", "B", "C", "D"},
                Datasets = new List<PieChartDataset>
                    new PieChartDataset
                        BackgroundColor = new[] {"#ff6384", "#55ee84", "#4463ff", "#efefef"},
                        Data = new List<int> {4, 5, 6, 7},
                        Label = "Light Red",
                        BorderWidth = 0,
                        HoverBackgroundColor = new[] {"#f06384"},
                        HoverBorderColor = new[] {"#f06384"},
                        HoverBorderWidth = new[] {1}, BorderColor = "#ffffff",
  1. In your index.html add these

    <script src="//"></script>
    <link rel="stylesheet" href="//">
    <script src="//"></script>
    <script src="_framework/blazor.webassembly.js" type="text/javascript" language="javascript"></script>
    <script src="ChartJsInterop.js" type="text/javascript" language="javascript"></script>

Sample Output

Bar Chart Example: Charts

NuGet packages (2)

Showing the top 2 NuGet packages that depend on ChartJs.Blazor:

Package Downloads

ADMINLTE plugins for Blazor is a collection of reusable components, with which you can easily develop digital services as a designer or developer. This project gathers a set of curated UI components that have been tested against the Blazorized AdminLTE project.


CyberBizSoft's Dashboard Components

GitHub repositories (4)

Showing the top 4 popular GitHub repositories that depend on ChartJs.Blazor:

Repository Stars
Tye is a tool that makes developing, testing, and deploying microservices and distributed applications easier. Project Tye includes a local orchestrator to make developing microservices easier and the ability to deploy microservices to Kubernetes with minimal configuration.
OpenBudgeteer is a budgeting app based on the Bucket Budgeting Principle
Demo application built with the Blazor client-side hosting model (WebAssembly) and .NET Core REST APIs secured by a JWT service.
Version Downloads Last updated
2.0.0-preview1 3,317 6/12/2020
1.1.0 128,612 3/28/2020
1.0.3 54,213 12/13/2019
1.0.2 2,896 11/16/2019
1.0.1 779 11/2/2019
1.0.0 232 11/2/2019
0.9.1-preview 1,099 4/6/2019
0.9.0-preview 536 4/6/2019
0.7.0 3,037 11/17/2018
0.6.1 514 11/11/2018
0.6.0 562 11/11/2018
0.5.0 570 11/3/2018
0.4.1-alpha 491 10/28/2018
0.4.0-alpha 461 10/28/2018
0.3.0-alpha 489 10/16/2018
0.2.0-alpha 497 10/15/2018
0.1.0-alpha 522 10/7/2018

1. Updated object model to expose even more of ChartJs.
2. Added support for Polar Area Chart.