RadzenPieSeries data labels don’t render when TooltipTemplate is set

Radzen.Blazor Components
1

I’m seeing an issue with RadzenChart → RadzenPieSeries where data labels stop rendering as soon as a TooltipTemplate is added.

Expected behavior

With <RadzenSeriesDataLabels Visible="true" /> set, the pie slice labels should be displayed, regardless of whether a TooltipTemplate is defined.

Actual behavior

If I define a TooltipTemplate on RadzenPieSeries, the data labels do not show up (even with Visible="true"). If I remove the TooltipTemplate, labels render normally.

Minimal repro:

<RadzenStack class="rz-p-0 rz-p-md-6 rz-p-lg-12" AlignItems="AlignItems.Center">
    <RadzenCard Variant="Variant.Outlined" Style="width: 100%;">
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0.5rem" Wrap="FlexWrap.Wrap">
            <RadzenCheckBox @bind-Value="@showDataLabels" Name="dataLabels"></RadzenCheckBox>
                <RadzenLabel Text="Show Data Labels" Component="dataLabels" />
        </RadzenStack>
    </RadzenCard>

    <RadzenStack Style="width: 100%; max-width: 600px;">
        <RadzenChart SeriesClick=@OnSeriesClick>
            <RadzenPieSeries Data="@revenue" Title="Revenue" CategoryProperty="Quarter" ValueProperty="Revenue">
                <RadzenSeriesDataLabels Visible="true" />
                <TooltipTemplate Context="data">
                    @GetTooltipText(data)
                </TooltipTemplate>                    
            </RadzenPieSeries>
        </RadzenChart>
    </RadzenStack>
</RadzenStack>

<EventConsole @ref=@console />

@code {
    EventConsole console;
    bool showDataLabels = false;

    void OnSeriesClick(SeriesClickEventArgs args)
    {
        console.Log(args);
    }

    class DataItem
    {
        public string Quarter { get; set; }
        public double Revenue { get; set; }
    }

    protected string GetTooltipText(object data)
    {
        return "test";
    }

    DataItem[] revenue = new DataItem[] {
        new DataItem
        {
            Quarter = "Q1",
            Revenue = 30000
        },
        new DataItem
        {
            Quarter = "Q2",
            Revenue = 40000
        },
        new DataItem
        {
            Quarter = "Q3",
            Revenue = 50000
        },
        new DataItem
        {
            Quarter = "Q4",
            Revenue = 80000
        },
    };
}

Notes

  • Labels render as expected if I remove the TooltipTemplate.

  • This is on a PieSeries specifically (not sure if other series types are affected).

Playground repro: Playground | Radzen Blazor Components

2

Hi @Vangi,

You need to use ChildContent in this case:

            <RadzenPieSeries Data="@revenue" Title="Revenue" CategoryProperty="Quarter" ValueProperty="Revenue">
                <ChildContent> <!-- ChildContent is needed as TooltipTemplate is a second RenderFragment property -->
                    <RadzenSeriesDataLabels Visible="true" />
                </ChildContent>
                <TooltipTemplate Context="data">
                    @GetTooltipText(data)
                </TooltipTemplate>                            
            </RadzenPieSeries>

Then the both data labels and TooltipTemplate are correctly set. Here is a working demo.

3

Great! Thank you! This solves the issue.