I’m making a website where people can browse data by region. Basically, it shows a bar chart, and there’s a dropdown menu at the top that updates the data based on the selection.
One detail I’m having trouble with: I’d like the area of the chart to be identical regardless of the data shown. However, depending on the magnitude of the data, the area beside the y-axis will be wider or narrower. You can see what I mean in the simplified example below. The second image has more space to the left of the chart to accommodate the larger numbers, which slightly squishes the area of the actual chart. I would like the chart area to be identical between charts.
I’ve looked into the “padding” option, but it just seems to add white space around the chart, which isn’t quite what I want. Here’s some sample code. Anyone have any ideas?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<select name="nation_select" id="nation_dropdown" onchange=update_plot()>
<option value="nation_1">Nation 1</option>
<option value="nation_2">Nation 2</option>
</select>
<div><canvas id="canvas_national_ts" width="1000" height="480"></canvas></div>
<script>
// Make plot
function update_plot() {
nation_selected = document.getElementById('nation_dropdown').value;
// Set the data
var time = [1,2,3,4,5];
if (nation_selected == 'nation_1') {var data = [1,2,1,3,2];}
if (nation_selected == 'nation_2') {var data = [1000000,1040000,970000,1200000,900000];}
// Make a plot
const ctx_national_ts = document.getElementById('canvas_national_ts');
if (Chart.getChart(ctx_national_ts)) {
Chart.getChart(ctx_national_ts).destroy();
};
var chart_national_ts = new Chart(ctx_national_ts, {
type: 'bar',
data: {
labels: time,
datasets: [{
data: data,
}]
}
})
}
// Initial plot
update_plot();
</script>
</body>
</html>
