No description, website, or topics provided.
Clone or download
mariusmuntean Added a Demo app that directly uses the NuGet package - to be used as…
… a simple reference project config to get started
Latest commit 094bb6d Nov 29, 2018

ChartJs interop with Blazor

This is a Blazor Component that wraps ChartJS.

Build Status


Need your opinion

Let me know how you like ChartJs.Blazor on Twitter @MunteanMarius

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

Currently I've implemented support for all ChartJs charts. Do you miss anything that makes ChartJs.Blazor a show stopper?


  • Extended the support for Legent Item click and hover evnt handler.
  • Check out the updated samples page. You can now interact with the chart dataset.
  • Added support for Chart Legends with custom Js functions for handling onClick, onHover events for Legend Items.
  • Check out the updated samples page. You can now interact with the chart dataset.
  • Simplified some behind-the-scenes code
  • Added support for Scatter Chart
  • Improved the samples and updated the gif
  • Updated object model that exposes even more features of ChartJs
  • Added support for Polar Area Chart
  • Updated object model that exposes more features of ChartJs
  • Initial release.
  • Support for almost all charts from ChartJs, including: LineChart, BarChart, RadarCart, Doughnut- and Pie-Chart, BubbleChart, MixedChart

Please keep in mind that this is still a preview. Expect breaking changes during the next 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


For detailed instruction go to the Wiki page.

  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="css/bootstrap/bootstrap-native.min.js"></script>-->
    <script src="//"></script>
    <!--<script src=""></script>-->
    <link rel="stylesheet" href="//">
    <script src="//"></script>
    <!--<script type="blazor-boot">
    <script src="_framework/blazor.webassembly.js" type="text/javascript" language="javascript"></script>
    <script src="ChartJsInterop.js" type="text/javascript" language="javascript"></script>

Sample Output

Test it in your browser:

Or just watch me click through the samples Charts