Blazor dotnet wrapper library for ChartJs
$ dotnet add package pax.BlazorChartJsBlazor dotnet wrapper library for ChartJs
This library is using JavaScript isolation. JS isolation provides the following benefits:
dotnet 6
dotnet add package pax.BlazorChartJs
Program.cs:
builder.Services.AddChartJs(options =>
{
// default
options.ChartJsLocation = "https://cdn.jsdelivr.net/npm/chart.js";
options.ChartJsPluginDatalabelsLocation = "https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2";
});
Sample Project pax.BlazorChartJs.samplelib with Sample Chart
<div class="btn-group">
<button type="button" class="btn btn-primary" @onclick="Randomize">Randomize</button>
</div>
<div class="w-75 h-50">
<ChartComponent
@ref="chartComponent"
ChartJsConfig="chartJsConfig"
OnEventTriggered="ChartEventTriggered">
</ChartComponent>
</div>
@code {
ChartJsConfig chartJsConfig = null!;
ChartComponent? chartComponent;
private bool chartReady;
protected override void OnInitialized()
{
chartJsConfig = new ChartJsConfig()
{
Type = ChartType.bar,
Data = new ChartJsData()
{
Labels = new List<string>() { "Jan", "Feb", "Mar" },
Datasets = new List<ChartJsDataset>()
{
new BarDataset()
{
Label = "Dataset 1",
Data = new List<object>() { 1, 2, 3 }
}
}
}
};
base.OnInitialized();
}
private void ChartEventTriggered(ChartJsEvent chartJsEvent)
{
if (chartJsEvent is ChartJsInitEvent initEvent)
{
chartReady = true;
}
}
private void Randomize()
{
if (!chartReady)
{
return;
}
Random random = new();
Dictionary<ChartJsDataset, SetDataObject> chartData = new();
foreach (var dataset in chartJsConfig.Data.Datasets)
{
if (dataset is BarDataset barDataset)
{
List<object> newData = new();
foreach (var data in barDataset.Data)
{
newData.Add(random.Next(1, 10));
}
chartData[dataset] = new(newData);
}
}
chartJsConfig.SetData(chartData);
}
}
<details open="open"><summary>v0.5.0</summary>
</details>
<details><summary>v0.4.1</summary>
</details>
<details><summary>v0.4.0</summary>
</details>
<details><summary>v0.3.5</summary>
</details>
<details><summary>v0.3.4</summary>
</details>
<details><summary>v0.3.3</summary>
</details>
<details><summary>v0.3.2</summary>
</details>
<details><summary>v0.3.1</summary>
</details>
<details><summary>v0.3.0</summary>
</details>
<details><summary>v0.2.0</summary>
</details>
<details><summary>v0.1.3</summary>
</details>
<details><summary>v0.1.2</summary>
</details>
<details><summary>v0.1.1</summary>
</details>
<details><summary>v0.1.0</summary>
</details>ChartJsConfig.ReinitializeChart()ChartJsConfig.SetLabels(...)ChartJsConfig.AddData(...)ChartJsConfig.AddDataset(...)ChartJsConfig.SetData(...)ChartJsConfig.UpdateChartOptions() to update the chart options, only (e.g. StepSize)Several chart events are available, by default only the Init event is fired. The others can be activated in the ChartJsConfig.Options Sample
Several chart functions are available in the ChartComponent, e.g.:
ChartComponent.ResizeChart(...)ChartComponent.GetChartImage(...)ChartComponent.ToggleDataVisibility(...)
- Breaking Changes
- Update to ChartJs v4.x
- Removed ChartJs javascript files - defaults to cdn links, now. Use
options.ChartJsLocation = "mychart.js"to use a custom/local ChartJs version.- Removed chartjs-plugin-labels (you can still register it as custom plugin)
- Microsoft.AspNetCore.Components.Web upgrade to v6.0.13
- Added ScaleAxis X1 and Y1 (override ChartJsOptionsScales for other names)
ChartJsConfig.UpdateChartOptions()(will replaceChartComponent.UpdateChartOptions)ChartJsConfig.ReinitializeChart()(will replaceChartComponent.DrawChart)
- Catch ObjectDisposedException and JSException when disposing the ChartComponent while initializing
- Microsoft.AspNetCore.Components.Web upgrade to v6.0.12
- Title.Text is now IndexableOptions<string> - Breaking Change!
- chartComponent?.DrawChart() triggeres an InitEvent after the chart is complete
- ChartJsInitEvent does have the ChartJsConfigGuid set correctly, now
- RemoveDataset(s) can now handle self referencing and missing
- TimeCartesianAxisTicks fix
- Interactions fix
- Playwright tests
- ghpages
- ChartComponent DisposeAsync
- Fix #7 - Axis Ticks JsonConverter
- Added ChartJsInitEvent which is triggered when the chart finished initializing the first time
- StackedChart Sample
- Fix #6
- chartComponent.UpdateChartDatasets removed - use chartConfig.SetDatasets() instead
- Added Hidden option for Datasets
- Chart update refactoring - Breaking Changes!
- Chart events refactoring - Breaking Changes!
- Typescript
- NuGet udpates
- Time Scale Chart
- Optional javascript location options
- ChartJs API calls
- bugfixes
- refactoring
- IndexableOption - Breaking Change!
- Events
- Custom Plugin Sample
- ChartJs API calls
- Nuget Package
- RadarChart
- Readme
- Init