Data Labels

Data Labels

chartjs-plugin-datalabels draws labels directly on chart elements. The sample shows both one shared datalabel configuration and per-dataset overrides.

Configure the plugin source

AddChartJs(...) knows where the datalabel plugin script should be loaded from. The default setup can use the CDN:

builder.Services.AddChartJs(options =>
{
    options.ChartJsPluginDatalabelsLocation =
        "https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2";
});

Chart-level labels

Set Plugins.Datalabels to turn on shared label styling:

chartJsConfig.Options!.Plugins!.Datalabels = new DataLabelsConfig
{
    Display = "auto",
    Color = "#0a050c",
    BackgroundColor = "#cdc7ce",
    BorderColor = "#491756",
    BorderRadius = 4,
    BorderWidth = 1,
    Anchor = "end",
    Align = "start",
    Clip = true,
    Formatter = ChartJsFunction.FromName("formatPercent")
};

The formatter callback above uses the same registered callback module pattern as other ChartJsFunction values.

Per-dataset labels

Dataset options can override the shared plugin style:

for (var i = 0; i < chartJsConfig.Data.Datasets.Count; i++)
{
    var dataset = chartJsConfig.Data.Datasets[i];
    dataset.Datalabels = GetDataLabelsConfig(i);
}

chartJsConfig.ReinitializeChart();

Use this when different datasets need different colors, borders, placement, or formatter behavior.

Sample source

• DataLabelsPerDatasetChartComp.razor
• Data labels live sample - click ShowLabels or ShowLabels per Dataset.