Chartjs-Chart.js limit the display size of the chart

by

2👍

✅

You can accomplish that by setting some right-padding (as required) for your chart layout.

options: {
   layout: {
      padding: {
         right: 100 //set as you wish
      }
   },
   ...
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var chart = new Chart(ctx, {
   type: 'horizontalBar',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'Statistics',
         data: [3, 1, 2, 5, 4],
         backgroundColor: 'rgba(0, 119, 204, 0.8)',
      }]
   },
   options: {
      layout: {
         padding: {
            right: 100 //set as you wish
         }
      },
      scales: {
         xAxes: [{
            ticks: {
               beginAtZero: true
            }
         }]
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Leave a comment