Chartjs-Chart.js label and point getting cutoff on the right

by

0👍

✅

The option layout.padding work as below code snippet illustrates. You however need to carefully choose the values (number of pixels) in order to not completely hide the chart area.

I would however rather define xAxes.ticks.max to make sure the tick for 2018 is shown even if data would be available up to 2017 only.

const years = [];
const vals = [];
for (let year = 1968; year <= 2018; year++) {
  years.push(year.toString());
  vals.push(Math.floor(Math.random() * 3) + 1);  
}

var myChart = new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: years,
    datasets: [{
      label: 'Cdn dollar in cents',
      data: vals,
      borderColor: 'rgb(153,222,101)',
      backgroundColor: 'rgb(153,222,101, 0.2)',
      pointRadius: 0,
      borderWidth: 6
    }]
  },
  options: {
    responsive: true,
    layout: {
      padding: {
        left: 0,
        right: 100,
        top: 0,
        bottom: 0
      }
    },
    legend: {
      display: false
    },
    scales: {
      yAxes: [{
        ticks: {
          min: 0,
          max: 4,
          stepSize: 1
        }
      }],
      xAxes: [{
        type: "time",        
        time: {
          parser: 'YYYY',
          unit: "year",
          tooltipFormat: "YYYY"
        },
        ticks: {
          max: "2018",
          maxTicksLimit: 5,
          maxRotation: 0
        }
      }]
    }
  }
});
canvas {
  max-width: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> 
<canvas id="myChart" width="600" height="400"></canvas>

Leave a comment