[Chartjs]-How do I fix over limit y axis value in ChartJS

by

5👍

✅

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/chartjs-plugin-datalabels@2.0.0"></script>
<script>Chart.register(ChartDataLabels);</script>

Leave a comment