ChartJs.Blazor 0.2.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.2.0-alpha
dotnet add package ChartJs.Blazor --version 0.2.0-alpha
<PackageReference Include="ChartJs.Blazor" Version="0.2.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.2.0-alpha
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: ChartJs.Blazor, 0.2.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.2.0-alpha&prerelease

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

ChartJs interop with Blazor

This is a Blazor Components that wraps ChartJS. It was based on this repo: https://github.com/muqeet-khan/BlazorComponents

Changelog

<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 2, 3 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

To Install

Install-Package ChartJs.Blazor

or

dotnet add package ChartJs.Blazor

Usage

  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

Bar Chart Example: Charts

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 (4)

Showing the top 4 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.
TheAxelander/OpenBudgeteer
OpenBudgeteer is a budgeting app based on the Bucket Budgeting Principle
skclusive/Skclusive.Blazor.Samples
Skclusive.Blazor.Samples
thbst16/BlazorCrud
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,319 6/12/2020
1.1.0 128,704 3/28/2020
1.0.3 54,221 12/13/2019
1.0.2 2,898 11/16/2019
1.0.1 779 11/2/2019
1.0.0 232 11/2/2019
0.9.1-preview 1,102 4/6/2019
0.9.0-preview 539 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