How to display 100% stack chart label in percentage

[Sao]

Hi,

Following one of your examples, 100% stackcolumn has been created successfully, However, how can I display the label as ##% instead?

Code:

 <SfChart Title="Motor Vehicle Production by Manufacturer">

                            <ChartArea><ChartAreaBorder Width="0"></ChartAreaBorder></ChartArea>

                            <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" LabelIntersectAction="LabelIntersectAction.Rotate45">

                                <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>

                                <ChartAxisMinorGridLines Width="0"></ChartAxisMinorGridLines>

                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

                                <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>

                            </ChartPrimaryXAxis>

                            <ChartPrimaryYAxis Title="Vehicles Production" RangePadding="ChartRangePadding.None" Interval="20">

                                <ChartAxisMinorGridLines Width="1"></ChartAxisMinorGridLines>

                                <ChartAxisMajorTickLines Width="0"></ChartAxisMajorTickLines>

                                <ChartAxisMinorTickLines Width="0"></ChartAxisMinorTickLines>

                                <ChartAxisLineStyle Width="0"></ChartAxisLineStyle>

                            </ChartPrimaryYAxis>

                            <ChartSeriesCollection>

                                <ChartSeries ColumnWidth="0.5" DataSource="@SeriesCollectionForOD" XName="Product" YName="Overstocked" Width="2" Name="Overstocked" Type="ChartSeriesType.StackingColumn100">

                                    <ChartSeriesBorder Width="1" Color="#ffffff"></ChartSeriesBorder>

                                    <ChartMarker>

                                        <ChartDataLabel Visible="true" />

                                    </ChartMarker>

                                </ChartSeries>

                                <ChartSeries ColumnWidth="0.5" DataSource="@SeriesCollectionForOD" Fill="#fcba03" XName="Product" YName="Low_stock" Width="2" Name="Low Stock" Type="ChartSeriesType.StackingColumn100">

                                    <ChartSeriesBorder Width="0" Color="#fcba03"></ChartSeriesBorder>

                                    <ChartMarker>

                                        <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Middle" />

                                    </ChartMarker>

                                </ChartSeries>

                                <ChartSeries ColumnWidth="0.5" DataSource="@SeriesCollectionForOD" Fill="#ff0000" XName="Product" YName="Stockout" Width="2" Name="Stockout" Type="ChartSeriesType.StackingColumn100">

                                    <ChartSeriesBorder Width="0" Color="#ffffff"></ChartSeriesBorder>

                                    <ChartMarker>

                                        <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Middle" />

                                    </ChartMarker>

                                </ChartSeries>

                                <ChartSeries ColumnWidth="0.5" DataSource="@SeriesCollectionForOD" Fill="#008000" XName="Product" YName="Sufficient_stock" Width="2" Name="Sufficient Stock" Type="ChartSeriesType.StackingColumn100">

                                    <ChartSeriesBorder Width="0" Color="#008000"></ChartSeriesBorder>

                                    <ChartMarker>

                                        <ChartDataLabel Visible="true" Position="Syncfusion.Blazor.Charts.LabelPosition.Middle" />

                                    </ChartMarker>

                                </ChartSeries>

                            </ChartSeriesCollection>

                            <ChartLegendSettings Visible="true"></ChartLegendSettings>

                            <ChartLegendSettings EnableHighlight="true"></ChartLegendSettings>

                            <ChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y} (${point.percentage}%)</b>"></ChartTooltipSettings>

                        </SfChart>

[Swetha Babu]

Hi Sao,

Greetings from Syncfusion.

We can render the data label with percentage by using the Text argument in OnDataLabelRender event in Chart. We have created a simple blazor application to demonstrate the same and it can be downloaded from the below link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ChartSample-1102423618

Code Snippet:

<ChartEvents OnDataLabelRender="labelRender"></ChartEvents>

 

void labelRender(TextRenderEventArgs args)

    {

        args.Text = args.Text + '%';

    }

Screenshot:

Kindly, revert us if you have any concerns.

Regards,

Swetha