How to add afterDataLimits callback to chart.js

Question

Hi I am trying to add 1px to the top and bottom of my chart as when it hits the constraints of the chart half the line is hidden.

I have seen in issue Chart.js line chart is cut off at the top?

"I tried different values, it just pushes everything down, including the legend. The best workaround I managed to find is adjusting the scale max in the afterDataLimits callback. Cutting off only happens when the graph exactly touches the top grid line, so if you add just 1px at the top, it works fine. – RocketR Apr 19 at 8:26"

But i cannot find any documentation that show how to structure or where to place the call back to implement it the information i have found is

afterDataLimits axis Callback that runs after data limits are determined.

afterDataLimits Function undefined Callback that runs after data limits are determined. Passed a single argument, the scale instance.

public void setAfterDataLimits(JavaScriptFunction afterDataLimits) Callback that runs after data limits are determined. Passed a single argument, the scale instance.

afterDataLimits?: (scale?: any) => void;

None of which help me to add the call back.

I will show my code structure below and any help would be greatly appreciated.

 function initDashModalChart() {

var ctx = document.getElementById('dashModalChart');
var dec = $('#dashBarChart').data('decimals') || 2;
var referrer = $('#dashBarChart').data('isReferrer') || 0;
window.dashLineChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: $('#dashModalChart').data('labels'),
        datasets: [{
            data: $('#dashModalChart').data('leads'),
            label: 'Leads',
            amount: $('#dashModalChart').data('leads-amount'),
            fill: false,
            lineTension: 0.3,
            borderColor: "#00b7b7",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fff",
            pointBackgroundColor: "#00b7b7",
            pointBorderWidth: 2,
            radius: 6,
            pointRadius: 6,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "#00b7b7",
            pointHoverBorderWidth: 2,
            pointHitRadius: 10,
            spanGaps: false
        }, {
            data: $('#dashModalChart').data('quotes'),
            label: 'Quotes',
            amount: $('#dashModalChart').data('quotes-amount'),
            fill: false,
            lineTension: 0.3,
            borderColor: "#cd5985",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fff",
            pointBackgroundColor: "#cd5985",
            pointBorderWidth: 2,
            radius: 6,
            pointRadius: 6,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "#cd5985",
            pointHoverBorderWidth: 2,
            pointHitRadius: 10,
            spanGaps: false
        }, {
            data: $('#dashModalChart').data('cases'),
            label: 'Cases',
            amount: $('#dashModalChart').data('cases-amount'),
            fill: false,
            lineTension: 0.3,
            backgroundColor: "rgba(75,192,192,0.4)",
            borderColor: "#213841",
            borderCapStyle: 'butt',
            borderDash: [],
            borderDashOffset: 0.0,
            borderJoinStyle: 'miter',
            pointBorderColor: "#fff",
            pointBackgroundColor: "#213841",
            pointBorderWidth: 2,
            radius: 6,
            pointRadius: 6,
            pointHoverRadius: 5,
            pointHoverBackgroundColor: "#fff",
            pointHoverBorderColor: "#213841",
            pointHoverBorderWidth: 2,
            pointHitRadius: 10,
            spanGaps: false
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
        animation: {
            duration: 2000
        },
        layout: {
            padding: {
                top: 10,
                bottom: 10
            }
        },
        legend: {
            display: false
        },
        scales: {
            xAxes: [{
                gridLines: {
                    color: '#fff',
                    //drawTicks: false,
                    //zeroLineColor: "#6dc8c8"
                },
                ticks: {
                    fontColor: "#88909a",
                }
            }],
            yAxes: [{
                gridLines: {
                    color: "#ebebeb",
                    bodySpacing: 50,
                    drawTicks: false,
                    zeroLineColor: "#d1d4d8"
                },
                ticks: {
                    beginAtZero: true,
                    display: false,
                    //stepSize: 30
                }
            }]
        },
        tooltips: {
            mode: 'x',
            titleFontSize: 0,
            bodyFontSize: 10,
            bodySpacing: 10,
            multiKeyBackground: 'red',
            displayColors: true,
            callbacks: {
                afterDataLimits: function() {
                    i.callCallback(this.options.afterDataLimits, [this])
                },
                label: function(tooltipItem, data) {
                    var datasetLabel = data.datasets[tooltipItem.datasetIndex].label || 'Other';
                    var datasetAmount = $.number(data.datasets[tooltipItem.datasetIndex].amount[tooltipItem.index], dec) || '0.00';
                    var label = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
                    // edit tooltip text template
                    if (referrer == 1) {
                        return ' ' + datasetLabel.toUpperCase() + ': (' + label + ') '+$('#dashModalChart').data('currency')+datasetAmount;
                    } else {
                        return ' ' + datasetLabel.toUpperCase() + ': ' + label;
                    }
                },
                labelColor: function(tooltipItem, chartInstance) {
                    var meta = chartInstance.getDatasetMeta(tooltipItem.datasetIndex);
                    var activeElement = meta.data[tooltipItem.index];
                    var view = activeElement._view;
                    return {
                        borderColor: view.borderColor,
                        backgroundColor: view.borderColor
                    };
                },
            }
        }
    }
});

}

added your code and got this

Answer 1

afterDataLimits callback should be added under options.scales.yAxes , like so :

options: {
   scales: {
      yAxes: [{
         afterDataLimits: function(axis) {
            axis.max += 1; // add 1px to top
            axis.min -= 1; // add 1px to bottom
         }
      }]
   }
}

also, you are not actually adding the pixels, so that should be corrected as well.