ChartJs.Blazor 0.7.0

.NET Standard 2.0 This package targets .NET Standard 2.0. The package is compatible with this framework or higher.
There is a newer version of this package available.
See the version list below for details. 
dotnet add package ChartJs.Blazor --version 0.7.0                

                    
                

            
NuGet\Install-Package ChartJs.Blazor -Version 0.7.0
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package. 
<PackageReference Include="ChartJs.Blazor" Version="0.7.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package. 
paket add ChartJs.Blazor --version 0.7.0                

                    
                

            
#r "nuget: ChartJs.Blazor, 0.7.0"
#r directive can be used in F# Interactive and Polyglot Notebooks. 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.7.0

// Install ChartJs.Blazor as a Cake Tool
#tool nuget:?package=ChartJs.Blazor&version=0.7.0

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?

Changelog

<details open="open"> <summary>v0.7.0</summary>

</details>

<details> <summary>v0.6.0</summary>

  • 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.

</details>

<details><summary>v0.5.0</summary>

  • 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.

</details>

<details ><summary>0.4.0-alpha</summary>

  • Simplified some behind-the-scenes code
  • Added support for Scatter Chart
  • Improved the samples and updated the gif </details>

<details><summary>0.3.0-alpha</summary>

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

<details><summary>0.2.0-alpha</summary>

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

<details><summary>0.1.0-alpha</summary>

  • 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 releases. I'm using this opportunity to learn Blazor.

Prerequisites

Don't know what Blazor is? Read here

Prerequisites.

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

Installation

There's a NuGet package: https://www.nuget.org/packages/ChartJs.Blazor

Install from the command line:

Install-Package ChartJs.Blazor

or

dotnet add package ChartJs.Blazor

Usage

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>
</div>
<ChartJsPieChart ref="pieChartJs" Config="@pieChartConfig" Width="600" Height="300"/>

... make sure to create that instance

@functions{

    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
    .
    .
    .
<body>
    <app>Loading...</app>

    
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    
    <script src="_framework/blazor.webassembly.js" type="text/javascript" language="javascript"></script>
    <script src="ChartJsInterop.js" type="text/javascript" language="javascript"></script>
</body>
    .
    .
    .

Sample Output

Test it in your browser: https://www.iheartblazor.com/

Or just watch me click through the samples Charts

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed. 
.NET Core netcoreapp2.0 was computed.  netcoreapp2.1 was computed.  netcoreapp2.2 was computed.  netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.0 is compatible.  netstandard2.1 was computed. 
.NET Framework net461 was computed.  net462 was computed.  net463 was computed.  net47 was computed.  net471 was computed.  net472 was computed.  net48 was computed.  net481 was computed. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen40 was computed.  tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages (2)

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

Package Downloads
Blazorized.AdminLte.Plugins

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.Dashboard.Authentication

CyberBizSoft's Dashboard Components

GitHub repositories (3)

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

Repository Stars
dotnet/tye
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.
Azure-Samples/cosmos-db-design-patterns
A collection of design pattern samples for building applications and services with Azure Cosmos DB for NoSQL.
skclusive/Skclusive.Blazor.Samples
Skclusive.Blazor.Samples
Version Downloads Last updated
2.0.0-preview1 12,161 6/12/2020
1.1.0 373,723 3/28/2020
1.0.3 60,037 12/13/2019
1.0.2 3,494 11/16/2019
1.0.1 1,725 11/2/2019
1.0.0 467 11/2/2019
0.9.1-preview 1,276 4/6/2019
0.9.0-preview 694 4/6/2019
0.7.0 3,462 11/17/2018
0.6.1 786 11/11/2018
0.6.0 843 11/11/2018
0.5.0 932 11/3/2018
0.4.1-alpha 669 10/28/2018
0.4.0-alpha 635 10/28/2018
0.3.0-alpha 715 10/16/2018
0.2.0-alpha 695 10/15/2018
0.1.0-alpha 724 10/7/2018

1. Updated to Blazor 0.7.0