How do I make the Line in ChartJS not exceed the maximum of yAxes

Question

I want the Line from this ChartJS not to exceed the maximum yAxes or in other words the line stays inside the element even though the datasets.data exceeds yAxes, i have searched the documentation myself but did not find it

Like This

Not Like This

This my code

 // Chartjs var ctx = document.getElementById('chart').getContext('2d'); var myChart = new Chart(ctx, { type: 'line', data: { labels: ['SUN', 'MON', 'TUE', 'WED', 'THU', "FRI", 'SAT'], datasets: [{ label: 'Daily Data', data: [730000, 1012000, 1220000, 1831000, 560000, 2012000, 890000], borderColor: '#3f89fb', borderWidth: 3, fill: false }] }, options: { scales: { // X or Horizontal xAxes: [{ gridLines: { color: "rgba(0, 0, 0, 0)", } }], // Y or Vertical yAxes: [{ stacked: true, ticks: { beginAtZero:true, max: 1000000, min: 0, stepSize: 200000, callback: function(value, index, values) { return value / 1e6 + 'M'; } }, gridLines: { color: "rgba(0, 0, 0, 0)", } }] }, // Tooltips tooltips: { callbacks: { label: function(tooltipItem, chart) { let datasetsData = chart.datasets[0].data[tooltipItem.index]; if (datasetsData.toString().length <= 6) { return 'Income Rp. '+datasetsData.toLocaleString() + 'K'; }else { return 'Income Rp. '+datasetsData.toLocaleString() + ' M'; } } } } } }); 

Answer 1

Given your code you can do something like: Move your data to a var like

var myData = [730000, 1012000, 1220000, 1831000, 560000, 2012000, 890000];

Then change your data field to data: myData, Then change your Ticks to

        ticks: {
          beginAtZero:true,
          max: Math.max.apply(Math, myData), //Sets the max to the max data you have
          min: 0,
          stepSize: 200000,
          callback: function(value, index, values) {
            return value / 1e6 + 'M';
          }
        },

You can add something to the max to make it a bit bigger.