the min and max attributes of chart.js are not working in the chart but the function next to the min and max statement is working properly I have checked all the websites and all the issues but can't find the solution for that.please help
const ctx = document.getElementById("myChart").getContext("2d");
let gradient = ctx.createLinearGradient(0,25,0,300);
gradient.addColorStop(0, "rgba(149, 76, 233, 0.5)");
gradient.addColorStop(0.35, "rgba(149, 76, 233, 0.25)");
gradient.addColorStop(1, "rgba(149, 76, 233, 0)");
const revenue = [30.0, 38.2, 45.1, 52.4, 58.9, 65.2, 69.8, 71.6, 75.6, 82.2];
const labels = [
"2010",
"2011",
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022",
];
const data = {
labels,
datasets: [
{
data: revenue,
label: "Annual Revenue",
fill: true,
backgroundColor: gradient,
borderColor: "rgba(149, 76, 233, 1)",
lineTension: 0.2,
pointRadius: 3,
borderWidth: 2,
},
],
};
const config = {
type: 'line',
data: data,
options: {
resposive: true,
scales: {
y:{
grindLines:{
color: "rgba(149, 76, 233, 1)"
},
ticks:{
beginAtZero: false,
max : "10",
min : "100",
callback: function (value){
return "$" + value + "k";
},
},
},
},
},
};
const myChart = new Chart(ctx, config);
With Chart.js version 3, min and max are of type number and they're no longer defined inside the ticks option but directly within the scale as follows:
scales: {
y: {
min: 10,
max: 100
}
...
I also noticed that in your code, min is bigger than max, this may have to be corrected.
Please take a look at the Chart.js documentation here.