Blazorise Chart DataLabels component

Display data labels on any chart type.

📊 The Community License has a limitation of 10 points per chart. Unlock full access to all features with our premium plans.

Chart DataLabels is made possible with the help of chartjs-plugin-datalabels.

To use the Chart DataLabels plugin, install the Blazorise.Charts.DataLabels package. It depends on Blazorise.Charts.

Installation

NuGet

Install DataLabels extension from NuGet.

Install-Package Blazorise.Charts.DataLabels

Imports

In your main _Imports.razor add:

@using Blazorise.Charts

@using Blazorise.Charts.DataLabels

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"
        }
    },
    ...
};