Blazor dotnet wrapper library for ChartJs
Get Started
$ dotnet add package pax.BlazorChartJsReadme
Blazor dotnet wrapper library for ChartJs (v3.9.1)
Getting started
Prerequisites
dotnet 6
Installation
dotnet add package pax.BlazorChartJs
Program.cs: (You can set optional javascript locations here)
builder.Services.AddChartJs();
Usage
Sample Project pax.BlazorChartJs.samplelib
<div class="btn-group">
<button type="button" class="btn btn-primary" @onclick="Randomize">Randomize</button>
<button type="button" class="btn btn-primary" @onclick="AddDataset">Add Dataset</button>
<button type="button" class="btn btn-primary" @onclick="AddData">Add Data</button>
<button type="button" class="btn btn-primary" @onclick="RemoveLastDataset">Remove Dataset</button>
<button type="button" class="btn btn-primary" @onclick="RemoveLastDataFromDatasets">Remove Data</button>
</div>
<div class="w-75">
<ChartComponent @ref="chartComponent" OnEventTriggered="LabelClicked" ChartJsConfig="chartJsConfig"></ChartComponent>
</div>
<div>
@if (!String.IsNullOrEmpty(labelClicked))
{
<p>
Label clicked: @labelClicked
</p>
}
</div>
@code {
ChartComponent? chartComponent;
ChartJsConfig chartJsConfig = null!;
private string? labelClicked;
protected override void OnInitialized()
{
chartJsConfig = new()
{
Type = ChartType.bar,
Data = new ChartJsData()
{
Labels = new List<string>()
{
"Red", "Blue", "Yellow", "Green", "Purple", "Orange"
},
Datasets = new List<ChartJsDataset>()
{
new BarDataset()
{
Label = "# of Votes",
Data = new List<object>() { 12, 19, 3, 5, 2, 3 },
BackgroundColor = new IndexableOption<string>(new List<string>()
{
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)",
"rgba(255, 159, 64, 0.2)",
}),
BorderColor = new IndexableOption<string>(new List<string>()
{
"rgba(255, 99, 132, 1)",
"rgba(54, 162, 235, 1)",
"rgba(255, 206, 86, 1)",
"rgba(75, 192, 192, 1)",
"rgba(153, 102, 255, 1)",
"rgba(255, 159, 64, 1)",
}),
BorderWidth = new IndexableOption<double>(1)
}
}
},
Options = new ChartJsOptions()
{
Responsive = true,
MaintainAspectRatio = true,
OnClickEvent = true,
Scales = new ChartJsOptionsScales()
{
Y = new LinearAxis()
{
SuggestedMax = 25
}
}
}
};
base.OnInitialized();
}
private void ShowChart()
{
chartComponent?.DrawChart();
}
private void LabelClicked(ChartJsEvent chartJsEvent)
{
if (chartJsEvent is ChartJsLabelClickEvent labelClickEvent)
{
labelClicked = labelClickEvent.Label;
}
}
private void AddData()
{
var dataAddEventArgs = ChartUtils.GetRandomData(chartJsConfig.Data.Datasets.Count);
Dictionary<ChartJsDataset, AddDataObject> datas = new();
for (int i = 0; i < chartJsConfig.Data.Datasets.Count; i++)
{
ChartJsDataset dataset = chartJsConfig.Data.Datasets[i];
datas.Add(dataset,
new AddDataObject(dataAddEventArgs.Data[i],
null,
dataAddEventArgs.BackgroundColors?[i],
dataAddEventArgs.BorderColors?[i]));
}
chartJsConfig.AddData(dataAddEventArgs.Label, null, datas);
}
private void Randomize()
{
var data = ChartUtils.GetRandomData(chartJsConfig.Data.Datasets.Count,
chartJsConfig.Data.Labels.Count, -100, 100);
Dictionary<ChartJsDataset, SetDataObject> chartData = new();
for (int i = 0; i < chartJsConfig.Data.Datasets.Count; i++)
{
var dataset = chartJsConfig.Data.Datasets.ElementAt(i);
var dataList = data.ElementAt(i);
chartData.Add(dataset, new SetDataObject(dataList));
}
chartJsConfig.SetData(chartData);
}
private void AddDataset()
{
var dataset = ChartUtils
.GetRandomDataset(chartJsConfig.Type == null ? ChartType.bar : chartJsConfig.Type.Value,
chartJsConfig.Data.Datasets.Count + 1,
chartJsConfig.Data.Labels.Count);
chartJsConfig.AddDataset(dataset);
}
private void RemoveLastDataset()
{
if (chartJsConfig.Data.Datasets.Any())
{
chartJsConfig.RemoveDataset(chartJsConfig.Data.Datasets.Last());
}
}
private void RemoveLastDataFromDatasets()
{
chartJsConfig.RemoveData();
}