PSC.Blazor.Components.Chartjs 6.0.20

There is a newer version of this package available.
See the version list below for details.
dotnet add package PSC.Blazor.Components.Chartjs --version 6.0.20                
NuGet\Install-Package PSC.Blazor.Components.Chartjs -Version 6.0.20                
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="PSC.Blazor.Components.Chartjs" Version="6.0.20" />                
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add PSC.Blazor.Components.Chartjs --version 6.0.20                
#r "nuget: PSC.Blazor.Components.Chartjs, 6.0.20"                
#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 PSC.Blazor.Components.Chartjs as a Cake Addin
#addin nuget:?package=PSC.Blazor.Components.Chartjs&version=6.0.20

// Install PSC.Blazor.Components.Chartjs as a Cake Tool
#tool nuget:?package=PSC.Blazor.Components.Chartjs&version=6.0.20                

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.7.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 Dictionary<string, Axis>()
        {
            {
                Scales.XAxisId, new Axis()
                {
                    Stacked = true,
                    Ticks = new Ticks()
                    {
                        MaxRotation = 0,
                        MinRotation = 0
                    }
                }
            },
            {
                Scales.YAxisId, new Axis()
                {
                    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.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories (1)

Showing the top 1 popular GitHub repositories that depend on PSC.Blazor.Components.Chartjs:

Repository Stars
YSGStudyHards/DotNetExercises
⚔【DotNetGuide专栏C#/.NET/.NET Core编程技巧练习集】C#/.NET/.NET Core编程常用语法、算法、技巧、中间件、类库、工作业务实操练习集,配套详细的文章教程讲解,助你快速掌握C#/.NET/.NET Core中各种编程常用语法、算法、技巧、中间件、类库、工作业务实操等等。
Version Downloads Last updated
8.0.8 4,051 9/9/2024
8.0.7 129 9/8/2024
8.0.6 982 8/2/2024
8.0.5 1,477 7/3/2024
8.0.4 126 7/3/2024
8.0.3 3,688 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,877 2/6/2024
6.0.43 14,178 11/13/2023
6.0.42 121 11/13/2023
6.0.41 1,287 10/20/2023
6.0.40 6,904 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

Tooltip callbacks by https://github.com/macias - Update ChartJs to 3.9.1