CODEWITHSUNDEEP
pythondjangochart.js
MarkoZg
MarkoZg

Reputation: 373

Chart js space above bar graph

I generate graph depending on the value from my calculations. Problem is, I don't know how to set up 'margins', how to define where to put data labels.

Datalables definition:

datalabels: {
               anchor: 'end',
               align: 'start',
               offset: 5,

Problem is, when a certain month value is 0, it's written over the labels on the bottom. Easy way to fix this would be to define a space about each column, so that it can that text can never go 'off screen' and define align: 'end'.

enter image description here

Case 2:

enter image description here

Upvotes: 2

Views: 1321

Answers (1)

uminder
uminder

Reputation: 26190

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>

Upvotes: 3

Related Questions