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