[Chartjs]-Chart js space above bar graph

by

3👍

✅

You could define some extra padding at the top of your chart using the option layout.padding.top.

Please take a look at below runnable code and see how it works:

var ctx = document.getElementById('myChart').getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
      labels: ['A', 'B', 'C'],
      datasets: [{
          label: 'My Dataset',
          data: [0, 0, 3],
          backgroundColor: 'orange'
        }
      ]
    },
    options: {
      layout: {
        padding: {
          top: 30
        }
      },
      plugins: {
        legend: {
          display: false
        },
        datalabels: {
          align: 'end',
          anchor: 'end'
        }
      }
    }
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0-rc.1/chartjs-plugin-datalabels.min.js"></script>
<canvas id="myChart" height="120"></canvas>

Leave a comment