We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to display 100% stack chart label in percentage

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>









1 Reply

SB Swetha Babu Syncfusion Team November 3, 2022 04:54 AM

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


Loader.
Live Chat Icon For mobile
Up arrow icon