PSC.Blazor.Components.Chartjs
6.0.37
See the version list below for details.
dotnet add package PSC.Blazor.Components.Chartjs --version 6.0.37
NuGet\Install-Package PSC.Blazor.Components.Chartjs -Version 6.0.37
<PackageReference Include="PSC.Blazor.Components.Chartjs" Version="6.0.37" />
paket add PSC.Blazor.Components.Chartjs --version 6.0.37
#r "nuget: PSC.Blazor.Components.Chartjs, 6.0.37"
// Install PSC.Blazor.Components.Chartjs as a Cake Addin #addin nuget:?package=PSC.Blazor.Components.Chartjs&version=6.0.37 // Install PSC.Blazor.Components.Chartjs as a Cake Tool #tool nuget:?package=PSC.Blazor.Components.Chartjs&version=6.0.37
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:
- Demo website
- Source code on GitHub
- Support forum
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
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
Add labels to the chart
I added the chartjs-plugin-datalabels
plugin in the component. This plugin shows the labels for each point in each graph. For more details abour this plugin, visit its website.
First, in the index.html, we have to add after the chart.js
script, another script for this component. It is important to add the script for chartjs-plugin-datalabels
after chart.js
. If the order is different, the plugin could not work. For example
<script src="_content/PSC.Blazor.Components.Chartjs/lib/Chart.js/chart.js"></script>
<script src="_content/PSC.Blazor.Components.Chartjs/lib/hammer.js/hammer.js"></script>
<script src="_content/PSC.Blazor.Components.Chartjs/lib/chartjs-plugin-zoom/chartjs-plugin-zoom.js"></script>
<script src="_content/PSC.Blazor.Components.Chartjs/lib/chartjs-plugin-datalabels/chartjs-plugin-datalabels.js"></script>
In the code, you have to change the property RegisterDataLabels
under Options
to true
. That asks to the component to register the library if the library is added to the page and there is data to show. For example, if I define a LineChartConfig
the code is
_config1 = new LineChartConfig()
{
Options = new Options()
{
RegisterDataLabels = true,
Plugins = new Plugins()
{
DataLabels = new DataLabels()
{
Align = DatalabelsAlign.Start,
Anchor = DatalabelsAnchor.Start,
}
}
}
};
With this code, the component will register the library in chart.js
. It is possible to define a DataLabels
for the entire chart. Also, each dataset can have its own DataLabels
that rewrites the common settings.
OnClickChart
When a user click on a chart and in particular on a point with value (bars, point, etc), the event OnClickChart
returns the dataset index, the value index in the dataaet and the value.
For example, in this chart the function OnClickChart
is called in the event of OnChartClick
.
<Chart Config="_config1" @ref="_chart1" Height="400px" OnChartClick="OnClickChart"></Chart>
The function receives ClickValue
as parameter that contains the 3 values.
public async Task OnClickChart(ClickValue value)
{
ClickString = $"Dataset index: {value.DatasetIndex} - Value index: {value.ValueIndex} " +
$"- Value: {value.Value}";
}
With this code, if the user clicks on a point, the function writes the values in the page.
PureSourceCode.com
PureSourceCode.com is my personal blog where I publish posts about technologies and in particular source code and projects in .NET.
In the last few months, I created a lot of components for Blazor WebAssembly and Blazor Server.
My name is Enrico Rossini and you can contact me via:
Blazor Components
Component name | Forum | NuGet | Website | Description |
---|---|---|---|---|
Autocomplete for Blazor | Forum | Simple and flexible autocomplete type-ahead functionality for Blazor WebAssembly and Blazor Server | ||
Browser Detect for Blazor | Forum | Demo | Browser detect for Blazor WebAssembly and Blazor Server | |
ChartJs for Blazor | Forum | Demo | Add beautiful graphs based on ChartJs in your Blazor application | |
Clippy for Blazor | Forum | Demo | Do you miss Clippy? Here the implementation for Blazor | |
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 clipboard | ||
DataTable for Blazor | Forum | Demo | DataTable component for Blazor WebAssembly and Blazor Server | |
Icons and flags for Blazor | Forum | Library with a lot of SVG icons and SVG flags to use in your Razor pages | ||
Markdown editor for Blazor | Forum | Demo | This is a Markdown Editor for use in Blazor. It contains a live preview as well as an embeded help guide for users. | |
Modal dialog for Blazor | Forum | Simple Modal Dialog for Blazor WebAssembly | ||
Modal windows for Blazor | Forum | Modal Windows for Blazor WebAssembly | ||
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 | ||
ScrollTabs | Tabs with nice scroll (no scrollbar) and responsive | |||
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 | ||
Timeline for Blazor | Forum | This is a new responsive timeline for Blazor Web Assembly and Blazor Server | ||
Toast for Blazor | Forum | Toast notification for Blazor applications | ||
Tours for Blazor | Forum | Guide your users in your Blazor applications | ||
WorldMap for Blazor | Forum | Demo | Show world maps with your data |
C# libraries for .NET6
Component name | Forum | NuGet | Description |
---|---|---|---|
PSC.Evaluator | Forum | PSC.Evaluator is a mathematical expressions evaluator library written in C#. Allows to evaluate mathematical, boolean, string and datetime expressions. | |
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... |
More examples and documentation
- Write a reusable Blazor component
- Getting Started With C# And Blazor
- Setting Up A Blazor WebAssembly Application
- Working With Blazor Component Model
- Secure Blazor WebAssembly With IdentityServer4
- Blazor Using HttpClient With Authentication
- InputSelect component for enumerations in Blazor
- Use LocalStorage with Blazor WebAssembly
- Modal Dialog component for Blazor
- Create Tooltip component for Blazor
- Consume ASP.NET Core Razor components from Razor class libraries | Microsoft Docs
Product | Versions 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. |
-
net6.0
- Microsoft.AspNetCore.Components.Web (>= 6.0.10)
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 |
Add GroupYAxis - Minor bugs