Blazorise SVG Chart Data Labels

Render labels around chart values and handle label interactions.

SVG chart data labels are configured declaratively with SvgChartDataLabels or through SvgChartOptions.DataLabels. Use the formatter callback to customize label text per point.

Examples

Value labels

Render formatted labels above column values and react to label events.
2 series, 4 categories.Monthly revenueTop labels with background and border020406080100120140JanFebMarApr50k72k106k129k84k79k99k93kTokyoNew York

Interact with a chart point or data label.

<SvgColumnChart TItem="MonthlySales"
                Items="@sales"
                Options="@options"
                Clicked="@OnPointClicked">
    <SvgChartTitle Title='@("Monthly revenue")' Subtitle='@("Top labels with background and border")' />
    <SvgChartLegend Position="SvgChartLegendPosition.Bottom" />
    <SvgChartTooltip Enabled />
    <SvgChartDataLabels Visible
                        Position="SvgChartDataLabelPosition.Top"
                        Formatter="@FormatRevenueLabel"
                        BackgroundColor='@((Color)"#ffffff")'
                        Border="@( new SvgChartBorderOptions { Color = Color.Primary, Width = 1, Radius = 4 } )"
                        Clicked="@OnDataLabelClicked"
                        Hovered="@OnDataLabelHovered" />
    <SvgChartCategoryAxis Value="@( item => item.Month )" />
    <SvgChartValueAxis BeginAtZero TickCount="6" />

    <SvgColumnSeries Name="Tokyo" Value="@( item => item.Tokyo )" Color="Color.Primary" BorderRadius="4" />
    <SvgColumnSeries Name="New York" Value="@( item => item.NewYork )" Color="Color.Info" BorderRadius="4" />
</SvgColumnChart>

<Paragraph Margin="Margin.Is2.FromTop.Is0.FromBottom">@lastEvent</Paragraph>

@code {
    private string lastEvent = "Interact with a chart point or data label.";

    private readonly SvgChartOptions options = new()
    {
        Height = 360,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
    };

    private readonly List<MonthlySales> sales =
    [
        new() { Month = "Jan", Tokyo = 49.9, NewYork = 83.6 },
        new() { Month = "Feb", Tokyo = 71.5, NewYork = 78.8 },
        new() { Month = "Mar", Tokyo = 106.4, NewYork = 98.5 },
        new() { Month = "Apr", Tokyo = 129.2, NewYork = 93.4 },
    ];

    private Task OnPointClicked( SvgChartPointEventArgs eventArgs )
    {
        lastEvent = $"Clicked point {eventArgs.SeriesName} / {eventArgs.Category}: {eventArgs.Value}";

        return Task.CompletedTask;
    }

    private Task OnDataLabelClicked( SvgChartPointEventArgs eventArgs )
    {
        lastEvent = $"Clicked label {eventArgs.SeriesName} / {eventArgs.Category}: {eventArgs.Value}";

        return Task.CompletedTask;
    }

    private Task OnDataLabelHovered( SvgChartPointEventArgs eventArgs )
    {
        lastEvent = $"Hovered label {eventArgs.SeriesName} / {eventArgs.Category}: {eventArgs.Value}";

        return Task.CompletedTask;
    }

    private string FormatRevenueLabel( SvgChartDataLabelContext context )
    {
        return $"{Convert.ToDouble( context.Value, System.Globalization.CultureInfo.InvariantCulture ).ToString( "0", System.Globalization.CultureInfo.InvariantCulture )}k";
    }

    private sealed class MonthlySales
    {
        public string Month { get; set; }

        public double Tokyo { get; set; }

        public double NewYork { get; set; }
    }
}

Radial labels

Render labels inside doughnut slices by configuring SvgChartOptions.DataLabels.
1 series, 4 categories.Traffic sourcesCentered labels on radial slices42%27%18%13%SearchDirectSocialReferral

Click a slice or label.

<SvgDoughnutChart TItem="object"
                  Data="@data"
                  Options="@options"
                  Clicked="@OnPointClicked">
    <SvgChartTitle Title='@("Traffic sources")' Subtitle='@("Centered labels on radial slices")' />
    <SvgChartTooltip Enabled />
</SvgDoughnutChart>

<Paragraph Margin="Margin.Is2.FromTop.Is0.FromBottom">@lastEvent</Paragraph>

@code {
    private string lastEvent = "Click a slice or label.";

    private readonly SvgChartOptions options = new()
    {
        Height = 340,
        Legend = new() { Position = SvgChartLegendPosition.Bottom },
        DataLabels = new()
        {
            Visible = true,
            Position = SvgChartDataLabelPosition.Center,
            Formatter = FormatShareLabel,
            Font = new()
            {
                Color = Color.Light,
                Weight = "700",
            },
        },
    };

    private readonly SvgChartData<double?> data = new()
    {
        Labels = ["Search", "Direct", "Social", "Referral"],
        Series =
        [
            new()
            {
                Name = "Share",
                Values = [42, 27, 18, 13],
            },
        ],
    };

    private Task OnPointClicked( SvgChartPointEventArgs eventArgs )
    {
        lastEvent = $"Clicked {eventArgs.Category}: {eventArgs.Value}%";

        return Task.CompletedTask;
    }

    private static string FormatShareLabel( SvgChartDataLabelContext context )
    {
        return $"{Convert.ToDouble( context.Value, System.Globalization.CultureInfo.InvariantCulture ):0}%";
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page