[Chartjs]-How to retain spacing between bars for two different bar charts in Chart.js 2

by

2👍

✅

You can scale the height of the second chart to match the ratio of the # of elements in the two charts.

Chart.js requires a container around the canvas to allow dynamic resizing so you’ll need to add that to the html also.

I needed to set maintainAspectRatio: false for this to work

// scale second chart based on ratio of data to the first
var fiddleFactor = 1.05; // determined by guesswork. Basic ratio is slightly off.
var ratio = data2.labels.length * fiddleFactor / data1.labels.length;

var container1Height = parseInt(document.getElementById("container1").style.height);

// update height of second chart
document.getElementById("container2").style.height = container1Height * ratio + 'px';

<div id="container1" class="chart-container" style="position: relative; height:300px;">
  <canvas id="myChart"></canvas>
</div>
<div id="container2" class="chart-container" style="position: relative; height:300px;">
  <canvas id="myChart2"></canvas>
</div>

Demo http://plnkr.co/edit/LZMAtY0MOQpLunyGhpzH?p=preview

Leave a comment