0
259
ViewsHow 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
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',
},
},
},
}
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question