How to format the percent in a label for a pie or donut chart
Environment
| Product | Chart for Blazor |
| Version | 4.5.0+ (for older component versions, browse an older version of this page) |
Description
When you use templates to customize the appearance of the labels, you may need to implement some application logic there or to implement complex formatting of the numbers.
This article shows how to format the percent in a label for a pie or donut chart to have a desired number of decimals and to be a number between 0 and 100, instead of the default number between 0 and 1 that has many decimal places:
Solution
To customize the percentage display, you need to:
Use a Chart label template. Set the label template function name to the
Templateparameter ofChartSeriesLabels.Use the
percentagefield of the JavaScript label template function's argument.Implement the desired additional rounding/formatting in the JavaScript code.
Format Pie Chart labels as percent
<TelerikChart>
<ChartSeriesItems>
<ChartSeries Type="ChartSeriesType.Pie"
Data="@PieData"
Field="@nameof(PieChartModel.SegmentValue)"
CategoryField="@nameof(PieChartModel.SegmentName)">
<ChartSeriesLabels Visible="true" Template="pieChartLabelTemplate" />
</ChartSeries>
</ChartSeriesItems>
<ChartTitle Text="Revenue per product" />
<ChartLegend Position="ChartLegendPosition.Right" />
</TelerikChart>
<!-- Move JavaScript code to a separate JS file in production -->
<script suppress-error="BL9992">
function pieChartLabelTemplate(context) {
return context.value + " mln\n" + round(context.percentage * 100, 1) + "%";
}
// From https://www.jacklmoore.com/notes/rounding-in-javascript/
function round(value, decimals) {
return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
}
</script>
@code {
private List<PieChartModel> PieData = new List<PieChartModel>()
{
new PieChartModel
{
SegmentName = "Product 1",
SegmentValue = 1
},
new PieChartModel
{
SegmentName = "Product 2",
SegmentValue = 3
},
new PieChartModel
{
SegmentName = "Product 3",
SegmentValue = 5
}
};
public class PieChartModel
{
public string SegmentName { get; set; }
public double SegmentValue { get; set; }
}
}