[Chartjs]-Chart.js labels of x-axes makes useless space in chartarea

by

1👍

✅

Try updating to the latest version of Chart.js (currently 2.7.2).

As you can see if you run the below snippet (created with the code you added to your question) the generated chart is well proportioned with no extra space to the right side.

var myChart = new Chart(document.getElementById('chart'), {
  type: 'line',
  data: {
    labels: ['2018-09-12', '2018-09-13'],
    datasets: [{
      data: [14, 10],
      borderColor: [
        'navy'
      ],
      borderWidth: 1,
      label: '# of votes',
      fill: false
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          max: 30,
          beginAtZero: true
        }
      }]
    },
  }
});
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<canvas id="chart"></canvas>

Leave a comment