Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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],
            );

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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/

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading