简体   繁体   中英

Adding X axis title causes Uncaught RangeError: minimumFractionDigits value is out of range in Chart.js

I'm trying to add a title to the X axis to a Chart.js chart, but when I put the title attribute on the x axis, I get an error Uncaught RangeError: minimumFractionDigits value is out of range, but it doesn't happen if I add a title to the Y axis.

grafica_roi = new Chart($('#grafica_roi'), {
    type: 'bar',
    data: {
        labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25'],
        datasets: [{
            //label: 'Beneficio obtenido',
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            backgroundColor: '#F0A202'
        }]
    },
    options: {
        maintainAspectRatio: false,
        scales: {
            y: {
                beginAtZero: true,
                ticks: {
                    font: {
                        size:function(context) {
                            var width = context.chart.width;
                            
                            if(width<=320) {
                                size = 12;
                            }
                            else {
                                if(width>320 && width<600) {
                                    size = 16;
                                }
                                else {
                                    size = 20;
                                }
                            }
                            //var size = Math.round(width / 32);

                            return size;
                        },
                        weight: "bold"
                    }
                },
                grid: {
                    display: false
                },
                title: {
                    text: 'Ahorro',
                    display: true
                }
            },
            x: {
                beginAtZero: true,
                ticks: {
                    font: {
                        size:function(context) {
                            var width = context.chart.width;
                            
                            if(width<=320) {
                                size = 12;
                            }
                            else {
                                if(width>320 && width<600) {
                                    size = 16;
                                }
                                else {
                                    size = 20;
                                }
                            }
                            //var size = Math.round(width / 32);

                            return size;
                        },
                        weight: "bold"
                    }
                },
                grid: {
                    display: false
                },
                //this title attribute below causes the problem
                title: {
                    text: 'Años',
                    display: true
                }
            }
        },
        plugins: {
            autocolors: false,
            legend: {
                display: false
            },
            title: {
                display: true,
                text: "Retorno de inversión",
                font: {
                    size: 20
                }
            }
        }
    }
});

Nevermind, I found the problem. The problem was I was using v3.1 Chart.js, while trying to use settings from v3.5 Chart.js.

I got a similar error when I provided NaN as a min and max in my axes config.

Example :

scales : {
    yAxes: {
        min: NaN,
        max: NaN,
        display: true,
    }
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM