图表 chart.js 中未显示最小和最大标签

Question

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

Answer 1

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 .