Blazorise Chart DataLabels
Display labels on data for any type of charts.
DataLabels is made possible with the help of chartjs-plugin-datalabels.
Installation
NuGet
Install DataLabels extension from NuGet.Install-Package Blazorise.Charts.DataLabels
Static Files
Include the necessary files into yourindex.html
or _Layout.cshtml
/ _Host.cshtml
file, depending if you’re using a Blazor WebAssembly or Blazor Server side project.
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
Examples
Line Chart
The plugin options can be changed at 2 different levels and are evaluated with the following priority:
- Per dataset: with
Datasets
parameter - Per chart: with
Options
parameter
In the following example, we are using both. With Options
, we're defining the shared styles, and with Datasets
we're defining the styles for specific datasets.
<LineChart @ref="" TItem="int" Options=""> <ChartDataLabels TItem="int" Datasets="" Options="" /> </LineChart>
@code { private LineChart<int> lineChart; // define regular chart options LineChartOptions lineChartOptions = new() { AspectRatio = 5d / 3d, Layout = new() { Padding = new() { Top = 32, Right = 16, Bottom = 16, Left = 8 } }, Elements = new() { Line = new() { Fill = false, Tension = 0.4, } }, Scales = new() { Y = new() { Stacked = true, } }, Plugins = new() { Legend = new() { Display = false } } }; // define specific dataset styles by targeting them with the DatasetIndex List<ChartDataLabelsDataset> lineDataLabelsDatasets = new() { new() { DatasetIndex = 0, Options = new() { BackgroundColor = BackgroundColors[0], BorderColor = BorderColors[0], Align = "start", Anchor = "start" } }, new() { DatasetIndex = 1, Options = new () { BackgroundColor = BackgroundColors[1], BorderColor = BorderColors[1], } }, new() { DatasetIndex = 2, Options = new () { BackgroundColor = BackgroundColors[2], BorderColor = BorderColors[2], Align = "end", Anchor = "end" } }, }; // some shared options for all data-labels ChartDataLabelsOptions lineDataLabelsOptions = new() { BorderRadius = 4, Color = "#ffffff", Font = new() { Weight = "bold" }, Formatter = ChartMathFormatter.Round, Padding = new( 6 ) }; private static string[] Labels = new string[] { "1", "2", "3", "4", "5", "6" }; private static string[] BackgroundColors = new string[] { "#4bc0c0", "#36a2eb", "#ff3d88" }; private static string[] BorderColors = new string[] { "#4bc0c0", "#36a2eb", "#ff3d88" }; private Random random = new( DateTime.Now.Millisecond ); protected override async Task OnAfterRenderAsync( bool firstRender ) { if ( firstRender ) { await HandleRedraw( lineChart, GetLineChartDataset ); await lineChart.Clear(); await lineChart.AddLabelsDatasetsAndUpdate( Labels, GetLineChartDataset( 0 ), GetLineChartDataset( 1 ), GetLineChartDataset( 2 ) ); } } private async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>( Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<int, TDataSet> getDataSet ) where TDataSet : ChartDataset<TItem> where TOptions : ChartOptions where TModel : ChartModel { await chart.Clear(); await chart.AddLabelsDatasetsAndUpdate( Labels, getDataSet( 0 ), getDataSet( 1 ), getDataSet( 2 ) ); } private LineChartDataset<int> GetLineChartDataset( int colorIndex ) { return new() { Label = "# of randoms", Data = RandomizeData( 2, 9 ), BackgroundColor = BackgroundColors[colorIndex], BorderColor = BorderColors[colorIndex], }; } List<int> RandomizeData( int min, int max ) { return Enumerable.Range( 0, Labels.Count() ).Select( x => random.Next( min, max ) ).ToList(); } }
Scriptable Options
The ChartDataLabelsOptions
object values also support functions as a callback. This feature allows you to change values dynamically based on the current state of data or dataset. Please note that whatever function expression you have will be transpiled to JavaScript, and it will be executed in JavaScript.
static Expression<Func<ScriptableOptionsContext, string>> TestScriptableColor = ( context ) => context.Active ? "#ff0000" : "#4bc0c0"; List<ChartDataLabelsDataset> lineDataLabelsDatasets = new() { new() { DatasetIndex = 0, Options = new() { BackgroundColor = TestScriptableColor, BorderColor = TestScriptableColor, Align = "start", Anchor = "start" } }, ... };
API
Attributes
Name | Description | Type | Default |
---|---|---|---|
Datasets |
List of datalabels to apply to the parent chart. | List<ChartDataLabelsDataset> | null |
Options |
Datalabels that will be set to the options instead of to the datasets. | ChartDataLabelsOptions | null |