Chart.js. How do I add another grid division if the maximum value is reached?

  • 0
    I would like the bar not to rest against the ceiling of the chart grid if the maximum (or very close to the maximum) value is reached (3, as in the screenshot, or, say, 2.95). Those. one more grid division was added at the top. It is important that the same logic works for any data, since in one chart there can be values ​​in the range of 0-10, and in another - in the range of tens of thousands (then, say, if the upper limit is 20,000, then an additional division is added already at 19,500). How can this be done, and is it possible at all?
    JavaScript Anonymous, Dec 17, 2019

  • 2 Answers
  • 0
    I haven't encountered these myself, but the documentation contains Customizing the axes , like I could write logic for determineDataLimits: function () {}, and then for beforeDataLimits () and afterDataLimits ( )
    August Gallegos

  • 0
    You can set the max value to a little more than it actually is.







    var ChartObj = new Chart(CanvasChart, {
    type: 'line',
    data: {
    labels: ["янв", "фев", "мар"],
    datasets: [Data1, Data2]
    },
    options: {
    legend: {
    labels: {
    fontColor: "black",
    fontSize: 18
    },
    },
    scales: {
    yAxes: [{
    ticks: {
    fontSize: 16,
    fontColor: "black",
    callback: function (value) {
    if (value == 101) {
    return "";
    }
    value = value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return value + "%";
    },
    max: 101,
    min: 80,
    }
    }],
    xAxes: [{
    ticks: {
    fontSize: 18,
    fontColor: "black",

    }
    }]
    }
    }
    });
    Anonymous

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!