CODEWITHSUNDEEP
javascriptchartschart.js
Firmansyah
Firmansyah

Reputation: 166

How do I fix over limit y axis value in ChartJS

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

enter image description here

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',
      },
    },
  },
}

Upvotes: 5

Views: 1223

Answers (1)

Leftium
Leftium

Reputation: 17903

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>

Upvotes: 5

Related Questions