Search code examples
chartsblazorsyncfusion.net-8.0syncfusion-chart

Labels with 3 digits are not displayed in the donut chart (syncfusion and Blazor)


I am having trouble with the display of labels at donut charts. 2 digits numbers are displayed but 3 digits numbers are not displayed. In syncfusion and blazor implementation. This is my code:

 _legalCustomersByStatusPieChartData.AddRange(_dashboardTotals.LegalCustomersByStatus.Select(x => new PieChartDataDTO() { Value = x.Value, Label = x.Key, Radius = "95%" }));
<PieChartComponent ChartPieResponse="_legalCustomersByStatusPieChartData" VisibleLabels="true" VisibleLegend="true" InnerRadius="55%" ChartTitle="@_legalCustomersPerStatusPieChartTitle" Palettes="@_chartPalettes"/>

 <SfAccumulationChart Height="120px">

    <AccumulationChartTooltipSettings Format="${point.x}" Enable="true"/>

    <AccumulationChartLegendSettings ToggleVisibility="false" Visible="@VisibleLegend" Reverse="true" Position="LegendPosition.Right"></AccumulationChartLegendSettings>

    <AccumulationChartSeriesCollection>

        <AccumulationChartSeries DataSource="@ChartPieResponse" Radius="Radius" InnerRadius="@InnerRadius" XName="Label" YName="Value" Palettes="@Palettes">

            <AccumulationDataLabelSettings Name="Value" Visible="@VisibleLabels" Position="AccumulationLabelPosition.Inside">

                <AccumulationChartDataLabelFont Color="white"/>

            </AccumulationDataLabelSettings>

        </AccumulationChartSeries>

    </AccumulationChartSeriesCollection>

    <AccumulationChartAnnotations>

        <AccumulationChartAnnotation Region="Regions.Series" X="50%" Y="50%">

            <ContentTemplate>

                <div style="display: flex;text-align: center;" id="annotation">

                    @(((MarkupString)ChartTitle).Sanitize())

                </div>

            </ContentTemplate>

        </AccumulationChartAnnotation>

    </AccumulationChartAnnotations>

</SfAccumulationChart>

enter image description here


Solution

  • The best option that I could find is to edit the legend showing the Label(Value) instead of only Label and with the help of tooltip when user is hovering the area to show the exact number without directly showing the number at the pie chart like we do now.