Accepted answer

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 id="container2" class="chart-container" style="position: relative; height:300px;">
  <canvas id="mychart2"></canvas>


Related Query

More Query from same tag