Recently there was a requirement to show custom label on a Pie Chart instead of the standard label which shows the percentage by default.
Here is how the data is presented by default. Here the label shows the percentage (31.6%) and on hovering it shows the actual value (42.00) of a particular slice.
But lets say there is a requirement to show custom label, perhaps the value along with the percentage. This can be achieved by utilizing the data-label property.
The data-label property expects a custom function which takes the context as argument and should return the custom label. The context object of type DataLabelContext contains an comprehensive list of properties which can be utilized. Check the complete list here.
We have added a page level function called pieSliceLabel which takes the context and returns the custom label. We could utilize context objects properties to do any calculation if required.
In this can we are just returning a string which shows the value(42) along with the percentage(31.6%) of the slice enclosed in brackets.
pieSliceLabel(dataContext) {
return `${dataContext.value} (${dataContext.label})`;
};
Next we need to hook this function to the data-label property of oj-chart. Make sure not to have any parenthesis after the function name. The context is passed inherently.
This is the outcome after the changes,
Thank you for reading! Hope you found this information valuable.