Goal:
The chart should work when you resize the webpage's width and height.
Problem:
It doesn't work.
Other:
https://jsbin.com/bubonojonu/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>canvas { width: 100% !important; height: auto !important; }
canvas {
width: 100% !important;
height: auto !important;
}<!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" class="chart-canvas w-100"></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>