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 your index.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="@lineChart" TItem="int" Options="@lineChartOptions">
    <ChartDataLabels TItem="int" Datasets="@lineDataLabelsDatasets" Options="@lineDataLabelsOptions" />
</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
On this page