CODEWITHSUNDEEP
javascriptchart.js
danajcarroll
danajcarroll

Reputation: 13

Chart.js won't display percentage label when value is above 1000?

Currently making an Emergency Fund Calculator but have hit a snag with chart.js

Found out how to make chart.js labels display as percentages, but I get "NaN%" as soon as one of my data values hit 1000. Weirdly enough the other smaller values will still display their correct percentage. The data is coming from each of the 4 categories of the monthly expenses, as you add things up from each tab, once any of the values reaches 1000+, you get "NaN%" in the pie chart.

The calculator is live on my website here https://danacarroll.com/eCalc/

Here is the code for the chart, at callbacks is where the calculating for percentages starts. This is my first time using chart.js, sorry if this is an easy fix I just didn't notice!

The percentage calculation I commented out was the original one I found, I thought switching it up a bit would help, but it doesn't seem to (BEDMAS wins no matter what haha).

Any help is appreciated, thanks again! :)

const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Housing Monthly', 'Transportation Monthly', 'Food & Health Monthly', 'Loans & Other Monthly'],
        datasets: [{
            data: chartData,
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)'
            ],
            borderWidth: 1,
            tooltip: {
                callbacks: {
                    label: function(context) {
                        let label = context.label;
                        let value = context.formattedValue;
        
                        if (!label)
                            label = 'Unknown'
        
                        let sum = 0;
                        let dataArr = context.chart.data.datasets[0].data;
                        dataArr.map(data => {
                            sum += Number(data);
                        });
        
                     
                        // (old calc) let percentage = (value * 100 / sum).toFixed(2) + '%';
                        let percentage = ((value / sum) * 100).toFixed(2) + '%';
                        return label + ": " + percentage;
                    }
                }
            }
        }]
    }, options: {
        maintainAspectRatio: false,
        plugins: {
            legend: {
                // display: false
            }
        }
    }
});

Upvotes: 1

Views: 528

Answers (1)

Jwit
Jwit

Reputation: 126

The problem is that formattedValue is a string and it uses commas as separators. Javascript can automatically turn a string into its numerical value IF there's no invalid characters, but commas are invalid leading to your scenario of breaking over 1000.

You could use

let value = context.parsed;

Upvotes: 2

Related Questions