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

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

ChartJs interop with Blazor

Currently, starting with a simple ChartJS implementation.

Prerequisites

Don't know what Blazor is? Read here

Complete all Blazor dependencies.

  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 cshtml file add this:
<div class="row">
    <button class="btn btn-primary" onclick="@UpdateChart">Update Chart </button>
</div>
<ChartJsLineChart ref="lineChartJs" Chart="@blazorLineChartJS" Width="600" Height="300" />
@functions{

    public ChartJSChart<ChartJsLineDataset> blazorLineChartJS { get; set; } = new ChartJSChart<ChartJsLineDataset>();
    ChartJsLineChart lineChartJs;

    protected override void OnInit()
    {

        blazorLineChartJS = new ChartJSChart<ChartJsLineDataset>()
        {
            ChartType = "line",
            CanvasId = "myFirstLineChart",
            Options = new ChartJsOptions()
            {
                Text = "Sample chart from Blazor",
                Display = true,
                Responsive = false
            },
            Data = new ChartJsData<ChartJsLineDataset>()
            {
                Labels = new List<string>() { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
                Datasets = new List<ChartJsLineDataset>()
                 {
                        new ChartJsLineDataset()
                        {
                            BackgroundColor = "#ff6384",
                            BorderColor = "#ff6384",
                            Label = "# of Votes from blazor",
                            Data = new List<int>{ 19,12,5,3,3,2},
                            Fill = false,
                            BorderWidth = 2,
                            PointRadius = 3,
                            PointBorderWidth=1
                        }
                 }
            }
        };
    }

    public void UpdateChart()
    {
        //Update existing dataset
        blazorLineChartJS.Data.Labels.Add($"New{DateTime.Now.Second}");
        var firstDataSet = blazorLineChartJS.Data.Datasets[0];
        firstDataSet.Data.Add(DateTime.Now.Second);

        //Add new dataset
        //blazorLineChartJS.Data.Datasets.Add(new ChartJsLineDataset()
        //{
        //    BackgroundColor = "#cc65fe",
        //    BorderColor = "#cc65fe",
        //    Label = "# of Votes from blazor 1",
        //    Data = new List<int> {20,21,12,3,4,4},
        //    Fill = true,
        //    BorderWidth = 2,
        //    PointRadius = 3,
        //    PointBorderWidth = 1
        //});

        lineChartJs.UpdateChart(blazorLineChartJS);
    }
}
  1. In index.html add:
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <script type="blazor-boot">
    </script>

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,317 6/12/2020
1.1.0 128,411 3/28/2020
1.0.3 54,200 12/13/2019
1.0.2 2,893 11/16/2019
1.0.1 779 11/2/2019
1.0.0 232 11/2/2019
0.9.1-preview 1,098 4/6/2019
0.9.0-preview 536 4/6/2019
0.7.0 3,036 11/17/2018
0.6.1 513 11/11/2018
0.6.0 561 11/11/2018
0.5.0 569 11/3/2018
0.4.1-alpha 490 10/28/2018
0.4.0-alpha 461 10/28/2018
0.3.0-alpha 488 10/16/2018
0.2.0-alpha 496 10/15/2018
0.1.0-alpha 521 10/7/2018