Skip to content

chartjs 3.6.0 add X label

I used following code in Chart 2.2.1 and it worked well and we can see label Time.
Now we want to upgrade to 3.6.0 due to security reasons, but snippet stopped working. I attach 2 fiddles
Working 2.2.1: https://jsfiddle.net/maksim_beliaev/2ru3g5ot/8/
Not working 3.6.0: https://jsfiddle.net/maksim_beliaev/q2poncyd/5/

How can I set label for X and Y axis with new chartjs? In online docs for Axis and Labels looks like that syntax should be correct

function create_line_chart(ctx, x_axis, version_1, y_axis_1, version_2, y_axis_2) {
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: x_axis,
            type: 'line',
            defaultFontFamily: 'Montserrat',
            datasets: [{
                label: version_1,
                data: y_axis_1,
                backgroundColor: 'transparent',
                borderColor: 'rgba(220,53,69,0.75)',
                borderWidth: 3,
                pointStyle: 'circle',
                pointRadius: 5,
                pointBorderColor: 'transparent',
                pointBackgroundColor: 'rgba(220,53,69,0.75)',
            }, {
                label: version_2,
                data: y_axis_2,
                backgroundColor: 'transparent',
                borderColor: 'rgba(40,167,69,0.75)',
                borderWidth: 3,
                pointStyle: 'circle',
                pointRadius: 5,
                pointBorderColor: 'transparent',
                pointBackgroundColor: 'rgba(40,167,69,0.75)',
            }]
        },
        options: {
            responsive: true,

            tooltips: {
                mode: 'index',
                titleFontSize: 12,
                titleFontColor: '#000',
                bodyFontColor: '#000',
                backgroundColor: '#fff',
                titleFontFamily: 'Montserrat',
                bodyFontFamily: 'Montserrat',
                cornerRadius: 3,
                intersect: false,
            },
            legend: {
                display: false,
                labels: {
                    usePointStyle: true,
                    fontFamily: 'Montserrat',
                },
            },
            scales: {
                xAxes: [{
                    display: true,
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Time'
                    }
                }],
                yAxes: [{
                    display: true,
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    scaleLabel: {
                        display: true,
                        labelString: 'Value'
                    }
                }]
            },
            title: {
                display: false,
                text: 'Normal Legend'
            }
        }
    });
}

var ctx = document.getElementById( "canvas" );
            ctx.height = 150;
            create_line_chart(ctx,  [2010, 2011, 2012, 2013, 2014, 2015, 2016],
                194,
                [0, 30, 10, 120, 50, 63, 10],
                221,
                [0, 50, 40, 80, 40, 79, 120],
            );

Answer

Chart.js v3 has lots of API changes from Chart.js v2, you should pass your title configuration like this:

const titleConfig = {
    scales: {
        x: {
            display: true,
            title: {
                display: true,
                text: "Time",
                padding: { top: 20, left: 0, right: 0, bottom: 0 },
            },
        },
        y: {
            display: true,
            title: {
                display: true,
                text: "Value",
                padding: { top: 30, left: 0, right: 0, bottom: 0 },
            },
        },
    },
};

More information on how to use title configuration can be found on the documentation.
Here’s a working fiddle: https://jsfiddle.net/vkghzxLc/15/