Please make sure to use max-height style on your canvas.
for example:
<canvas id=“my_chart" style="max-height: 160px;"></canvas>
Solution 1 :
Solution 2 :
Also try giving height and width in % values rather than pixels.
Problem :
Whenever I change the page resolution or size or zooming in the page chartjs adjust charts, its okay.
But when undo my last action it doesn’t come back its original size. Actually its get bigger in every action that I made on the page.
This is what i want:
this is what happens when i zoom:
function doughnut_config(data, labels, center_text, tooltip_enabled = true) {
const config = {
type: 'doughnut',
data: {
datasets: [{
data: data,
backgroundColor: backgroundColor,
borderWidth: 0.3
}],
labels: labels
},
options: {
legend: false,
responsive: true,
maintainAspectRatio: false,
elements: {
center: {
text: center_text
}
},
tooltips: {
enabled: tooltip_enabled
}
}
};
return config;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<div class="col-lg-6" style="text-align: center;">
<canvas id="my_chart" style="height: 160px; "></canvas>
</div>Comments
Comment posted by stackoverflow.com/help/how-to-ask
Here we love to see some code. Please can you provide yours? Also please take a momant to read this guide “How to ask a good question?” here :
Comment posted by HeadhunterKev
Look at the