How do I fix over limit y axis value in ChartJS

Question

Hello Everyone!

I am using chartjs-plugin-datalabels to prevent unhoverable tiny values by displaying the value above his bar, but when one of them has the highest value the datalabels exceed the limit of the chart container

UPDATE:

Also, you can use suggestedMax option and I think it's better than giving a padding

const options = {
  plugins: {
    datalabels: {
      color: '#374774',
      font: { family: 'MyriadSemiBold', size: 14 },
      align: 'end',
      anchor: 'end',
      formatter: (value) => {
        if (value > 0) {
          return localizeNumber(value)
        }

        return ''
      },
    },
    legend: { display: false },
  },
  scales: {
    x: {
      grid: { lineWidth: 0 },
      ticks: {
        display: false,
      },
    },
    y: {
      // Highest value in your datasets
      suggestedMax: highestValue > 0 ? highestValue + 1e5 : 10,
      grid: { color: '#DFDFDF' },
      ticks: {
        callback: (value) => {
          return abbreviateNumber(value)
        },
        font: { family: 'MyriadRegular', size: 14 },
        color: '#374774',
      },
    },
  },
}

Answer 1

The easiest solution is to add padding to the top of your chart (simple sample below). You may also play around with the datalabel plugin's clamping options to adjust the position of the label when it's outside the chart.

const layoutOptions =  {
    padding: {
        top: 30  // Add 30 pixels of padding to top of chart.
    }
};

const data = {
    labels: ['Large', 'Small'],
    datasets: [{ data: [100, 2] }]
};

const config = {
    type: 'bar',
    data: data,
    options: {
        layout: layoutOptions,
        scales: { y: { beginAtZero: true, max: 100 } },
        plugins: {
            legend: { display: false },
            datalabels: { anchor: 'end', align: 'top' }
        }
    },
};

new Chart(document.getElementById('myChart'), config);

#myChart {
    max-height: 180px;
}

<div>
  <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>Chart.register(ChartDataLabels);</script>