score:5

Accepted answer

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>


Related Query

More Query from same tag