chart.js

Increase the y height in the bar chart

Goal:
Increase the height of the y axel that should be 30 instead of 20. Look at the black mark selection.

enter image description here

Problem:
Is it possible to do it?

Other:
https://jsbin.com/vupoxuraju/edit?html,output

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <style>

    </style>
    <title>Chart</title>
</head>

<body>
    <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"></script>
    <script>
        const ctx = document.getElementById('myChart');     
        const data = [10, 12, 14, 20, 16, 11];
           
        Chart.register(ChartDataLabels);
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['2020', '2021', '2022', '2023', '2024', '2025'],
                datasets: [{
                    label: `testtesttest`,
                    data: data,
                    borderWidth: 0,
                    backgroundColor: 'blue',
                    borderColor: 'blue'
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    title: {
                        display: true,
                        text: 'testtesttest',
                        color: 'black',
                        font: {
                            weight: 'bold',
                            size: 13
                        }
                    },
                    datalabels: {
                        anchor: 'end',
                        align: 'end',
                        color: 'black',
                        font: {
                            weight: '',
                        },
                        formatter: function (value, context) {
                            return value;
                        }
                    }
                }
            }
        });
    </script>
</body>

</html>

Solution

  • Yes, you can provide the maximum y-axis value with options.scales.y.max or options.scales.y.suggestedMax to solve the datalabel overlap issue.

    Reference: 

    const maxYValue = [...data].sort().reverse()[0];

Chart.register(ChartDataLabels);
new Chart(ctx, {
  ...,
  options: {
    ...,
    scales: {
      y: { max: maxYValue + 10  },
    },
    ...,
  },
});

    Demo @ StackBlitz