set number of decimal places for values in pie chart - add to page settings > custom code > footer scripts

footer-scripts.html

<script>
  
const chartSelector = '.my-chart'; /* selector for chart element */
const decimalPlaces = 0; /* number of decimal places */

document.addEventListener("DOMContentLoaded", () => {

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                if (node.nodeName === 'CANVAS' || (node.querySelector && node.querySelector('canvas'))) {

                    const chartElement = document.querySelector(chartSelector);
                    const chartId = chartElement?.dataset.xId;

                    if (chartId && window.xChart?.Instances?.[chartId]) {
                        const myChart = xChart.Instances[chartId];
                        const chartConfig = xChart.Config[chartId].config;

                        myChart.options.plugins.datalabels.formatter = function(value, context) {
                            if (value === null) {
                                return null;
                            }

                            const formattedValue = Number(value).toFixed(decimalPlaces);

                            return 'after' === chartConfig.xAxisUnitPosition ?
                                formattedValue + chartConfig.xAxisUnits :
                                chartConfig.xAxisUnits + formattedValue;
                        };

                        myChart.update();
                        observer.disconnect();
                    }
                }
            });
        });
    });

    const chartContainer = document.querySelector(chartSelector);
    if (chartContainer) {
        observer.observe(chartContainer, {
            childList: true,
            subtree: true
        });
    }

});
  
</script>