Chart.js. Как добавить еще одно деление сетки, если достигнуто максимальное значение?

Question

[Евгений Журов]

Хочется, чтобы bar не упирался в потолок сетки чарта, если достигается максимальное (или очень близкое к максимальному) значение (3, как на скрине, или, скажем, 2.95). Т.е. добавлялось еще одно интервальное деление сетки сверху. Важно, чтобы одна и та же логика работала для любых данных, т.к. в одном чарте могут быть значения в диапазоне 0-10, а в другом - в диапазоне десятков тысяч (тогда скажем, если верхняя граница - 20 000, то чтобы дополнительное деление добавлялось уже при 19 500). Как это можно реализовать, и можно ли вообще?

Answer 1

[Zhanna_K]

Сама с эти не сталкивалась, но в документации есть Индивидуальная настройка осей, вроде бы можно прописать логику для determineDataLimits: function() {}, а потом для beforeDataLimits() и afterDataLimits()

Answer 2

[Planet_93]

Можно задать значение max немного больше того, что на самом деле.

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",
                            
                        }
                    }]
                }
            }
        });