ChartJs interop with Blazor

This is a Blazor Component that wraps ChartJS. You can use the library in both client- and server-side projects. See the samples or reach out on Twitter if you need help.

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

v0.9.0

Added support for Blazor and Razor Components projects
Updated to ChartJs 2.8
Fixed vanishing-chart-bug (thanks community)
Refactored the core classes of the library so they don't feel so hacky anymore (thanks community)

v0.7.0

Updated to Blazor v0.7.0
Check out the updated samples page. I moved it to www.iheartblazor.com

v0.6.0

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.

v0.5.0

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.

0.4.0-alpha

Simplified some behind-the-scenes code
Added support for Scatter Chart
Improved the samples and updated the gif

0.3.0-alpha

Updated object model that exposes even more features of ChartJs
Added support for Polar Area Chart

0.2.0-alpha

Updated object model that exposes more features of ChartJs

0.1.0-alpha

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.

Prerequisites

Don't know what Blazor is? Read here

Prerequisites.

Visual Studio 15.8 or later
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

dotnet add package ChartJs.Blazor

Note: For server-side projects make sure to add the following line to the Configure(...) method of your Startup.cs file

ChartJsBlazor.AddStaticResourcesToWebRootPath(env.WebRootPath);

Then reference the ChartJsInterop.js file from your index.(cs)html like so

<script src="~/ChartJs.Blazor/ChartJsInterop.js" type="text/javascript" language="javascript"></script>

Usage

For detailed instruction go to the Wiki page.

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",
                    }
                }
            }
        };
    }
}

In your index.html add these

    .
    .
    .
<body>
    <app>Loading...</app>

    <!--<script src="css/bootstrap/bootstrap-native.min.js"></script>-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.bundle.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 type="blazor-boot">
            </script>-->
    <script src="_framework/blazor.webassembly.js" type="text/javascript" language="javascript"></script>
    <script src="ChartJsInterop.js" type="text/javascript" language="javascript"></script>
</body>
    .
    .
    .