PSC.Blazor.Components.Chartjs 6.0.13

There is a newer version of this package available.
See the version list below for details.
dotnet tool install --global PSC.Blazor.Components.Chartjs --version 6.0.13                
This package contains a .NET tool you can call from the shell/command line.
dotnet new tool-manifest # if you are setting up this repo
dotnet tool install --local PSC.Blazor.Components.Chartjs --version 6.0.13                
This package contains a .NET tool you can call from the shell/command line.
#tool dotnet:?package=PSC.Blazor.Components.Chartjs&version=6.0.13                
nuke :add-package PSC.Blazor.Components.Chartjs --version 6.0.13                

Create chart with Chart.js in Blazor

This library is a wrap around Chart.js for using it with Blazor WebAssembly and Blazor Server. The components is build with .NET6.

Few important links:

Installation

Fist, you have to add the component from NuGet. Then, open your index.html or _Host and add at the end of the page the following scripts:

<script src="_content/PSC.Blazor.Components.Chartjs/lib/Chart.js/chart.js"></script>
<script src="_content/PSC.Blazor.Components.Chartjs/Chart.js"></script>

The first script is the Chart.js library version 3.5.1 because I'm using this version to create the components. You can use other sources for it but maybe you can face issues in other versions.

Then, open your _Imports.razor and add the following:

@using PSC.Blazor.Components.Chartjs
@using PSC.Blazor.Components.Chartjs.Enums
@using PSC.Blazor.Components.Chartjs.Models
@using PSC.Blazor.Components.Chartjs.Models.Common
@using PSC.Blazor.Components.Chartjs.Models.Bar
@using PSC.Blazor.Components.Chartjs.Models.Bubble
@using PSC.Blazor.Components.Chartjs.Models.Doughnut
@using PSC.Blazor.Components.Chartjs.Models.Line
@using PSC.Blazor.Components.Chartjs.Models.Pie
@using PSC.Blazor.Components.Chartjs.Models.Polar
@using PSC.Blazor.Components.Chartjs.Models.Radar
@using PSC.Blazor.Components.Chartjs.Models.Scatter

There is a namespace for each chart plus the common namespaces (Enum, Models and the base).

Add a new chart

In your page you can create a new chart adding this code

<Chart Config="_config1" @ref="_chart1"></Chart>

In the code section you have to define those variables:

private BarChartConfig _config1;
private Chart _chart1;

Then, you can pass the configuration for the chart into _config1 (in the example code above). For a bar chart, the configuration is

_config1 = new BarChartConfig()
{
    Options = new Options()
    {
        Plugins = new Plugins()
        {
            Legend = new Legend()
            {
                Align = LegendAlign.Center,
                Display = false,
                Position = LegendPosition.Right
            }
        },
        Scales = new Scales()
        {
            X = new XAxes()
            {
                Stacked = true,
                Ticks = new Ticks()
                {
                    MaxRotation = 0,
                    MinRotation = 0
                }
            },
            Y = new YAxes()
            {
                Stacked = true
            }
        }
    }
};

Then, you have to define the Labels and the Datasets like that

_config1.Data.Labels = BarDataExamples.SimpleBarText;
_config1.Data.Datasets.Add(new Dataset()
{
    Label = "Value",
    Data = BarDataExamples.SimpleBar.Select(l => l.Value).ToList(),
    BackgroundColor = Colors.Palette1,
    BorderColor = Colors.PaletteBorder1,
    BorderWidth = 1
});

The result of the code above is this chart

image

Implemented charts

  • Bar chart
  • Line chart
  • Area
  • Other charts
    • Scatter
    • Scatter - Multi axis
    • Doughnut
    • Pie
    • Multi Series Pie
    • Polar area
    • Radar
    • Radar skip points
    • Combo bar/line
    • Stacked bar/line

Other Blazor components

Component name Forum Description
DataTable for Blazor Forum DataTable component for Blazor WebAssembly and Blazor Server
Markdown editor for Blazor Forum This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users.
Browser Detect for Blazor Forum Browser detect for Blazor WebAssembly and Blazor Server
CodeSnipper for Blazor Forum Add code snippet in your Blazor pages for 196 programming languages with 243 styles
Copy To Clipboard Forum Add a button to copy text in the clipbord
SVG Icons and flags for Blazor Forum Library with a lot of SVG icons and SVG flags to use in your Razor pages
Modal dialog for Blazor Forum Simple Modal Dialog for Blazor WebAssembly
PSC.Extensions Forum A lot of functions for .NET5 in a NuGet package that you can download for free. We collected in this package functions for everyday work to help you with claim, strings, enums, date and time, expressions...
Quill for Blazor Forum Quill Component is a custom reusable control that allows us to easily consume Quill and place multiple instances of it on a single page in our Blazor application
Segment for Blazor Forum This is a Segment component for Blazor Web Assembly and Blazor Server
Tabs for Blazor Forum This is a Tabs component for Blazor Web Assembly and Blazor Server
WorldMap for Blazor Forum Show world maps with your data

More examples and documentation

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  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. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

This package has no dependencies.

Version Downloads Last updated
8.0.8 4,196 9/9/2024
8.0.7 129 9/8/2024
8.0.6 984 8/2/2024
8.0.5 1,479 7/3/2024
8.0.4 126 7/3/2024
8.0.3 3,694 4/22/2024
8.0.2 487 4/11/2024
8.0.1 141 4/11/2024
7.0.1 1,564 3/7/2024
7.0.0 334 3/7/2024
6.0.44 3,893 2/6/2024
6.0.43 14,277 11/13/2023
6.0.42 121 11/13/2023
6.0.41 1,287 10/20/2023
6.0.40 6,909 4/4/2023
6.0.39 262 4/4/2023
6.0.38 1,453 3/16/2023
6.0.37 286 3/14/2023
6.0.36 277 3/13/2023
6.0.35 1,739 12/6/2022
6.0.34 445 11/25/2022
6.0.33 357 11/25/2022
6.0.32 375 11/25/2022
6.0.31 417 11/16/2022
6.0.30 810 11/10/2022
6.0.29 803 11/7/2022
6.0.28 367 11/2/2022
6.0.27 604 10/24/2022
6.0.26 473 10/21/2022
6.0.25 437 10/21/2022
6.0.24 546 10/19/2022
6.0.23 458 10/19/2022
6.0.22 439 10/19/2022
6.0.21 466 10/19/2022
6.0.20 471 10/19/2022
6.0.19 490 10/19/2022
6.0.18 664 10/15/2022
6.0.17 470 10/14/2022
6.0.16 452 10/14/2022
6.0.15 476 10/13/2022
6.0.13 530 10/11/2022
6.0.12 527 10/11/2022
6.0.11 463 10/10/2022
6.0.10 500 10/10/2022
6.0.9 829 8/3/2022
6.0.8 1,277 5/6/2022
6.0.7 484 5/6/2022
6.0.6 491 5/6/2022
6.0.5 468 5/6/2022
6.0.4 555 4/13/2022
6.0.3 414 12/8/2021
6.0.2 357 12/8/2021
6.0.1 357 12/8/2021
6.0.0 1,061 12/1/2021

point radius for scatter by https://github.com/macias