0
195
Viewschart.js scale xaxis with date, strange renderer
Hi i got this renderer with my config on chart.js, i dont understand why i got
this is the version of chart.js
/*!
* Chart.js
* http://chartjs.org/
* Version: 2.7.1
*
* Copyright 2017 Nick Downie
* Released under the MIT license
* https://github.com/chartjs/Chart.js/blob/master/LICENSE.md
*/i generate my chart with this function and i dont understand how to fix my problem thanks for your help
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: datadate,
datasets: [{
data: datavalue,
label: "Value array",
borderColor: "#3e95cd",
pointRadius: 3,
pointHoverRadius: 3,
fill: false
}
]
},
options: {
title: {
display: true,
text: 'returned value'
},
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}],
xAxes: [ {
type: 'time',
time: {
min: Math.min.apply(null, datadate),
max: Math.max.apply(null, datadate)
}
}],
},
responsive: true
}
});
·
Juan Pablo Isaza
1 answers
Answer question0
Update your Chart.js version to 3.0.0 or above instead of 2.7.1, works well in updated versions.
see the example below which is made on Chart.js version 3.0.0.
Note: below is a simple line chart example.
const ctx = document.getElementById("tests-chart");
const data =[
{ x: "24/03/2022", y: 20 },
{ x: "25/03/2022", y: 5 },
{ x: "24/06/2022", y: 10 },
{ x: "25/06/2022", y: 5 }
];
const testsChart = new Chart(document.getElementById("tests-chart"), {
type: 'line',
data: {
datasets: [{
data: data,
label: "Value array",
borderColor: "#3e95cd",
pointRadius: 3,
pointHoverRadius: 3,
fill: false
}
]
},
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0/chart.min.js"></script>
<div>
<canvas id="tests-chart"></canvas>
</div>
·
Juan Pablo Isaza
Report
Answer question