title: Chartjs - keeping 2 graphs aligned side by side
body: <p>Jsfiddle: <a href="http://jsfiddle.net/8gvkmLxL/" rel="noreferrer">http://jsfiddle.net/8gvkmLxL/</a></p>
  
  <p>I have 2 bar graphs that are next to each other and I want them to be aligned relative to their x-axis. I'm having trouble achieving this as the graph height changes according to the length of the labels (see jsfiddle link). What's the best way to maintain consistency of height of the actual charts (as opposed to the canvas)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var data,ctx,mychart; 
  
  data = {
      labels: ["Iantojones","Jackharkness","Owenharper"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [50, 88, 15]
          }
      ]
  };
  
  ctx = document.getElementById("chart_a").getContext("2d");
  mychart = new Chart(ctx).Bar(data);
  
  data = {
      labels: ["Dmitri.Ivanovich.Mendeleev","Yuri.Alekseyevich.Gagarin","Alexey.Arkhipovich.Leonov"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [50, 88, 15]
          }
      ]
  };
  
  ctx = document.getElementById("chart_b").getContext("2d");
  mychart = new Chart(ctx).Bar(data);
  
  data = {
      labels: ["Iantojones","Jackharkness","Owenharper"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [50, 88, 15]
          }
      ]
  };
  
  ctx = document.getElementById("chart_c").getContext("2d");
  mychart = new Chart(ctx).Bar(data);
  
  data = {
      labels: ["Dmitri.Ivanovich","Yuri.Alekseyevich","Alexey.Arkhipovich"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.5)",
              strokeColor: "rgba(220,220,220,0.8)",
              highlightFill: "rgba(220,220,220,0.75)",
              highlightStroke: "rgba(220,220,220,1)",
              data: [50, 88, 15]
          }
      ]
  };
  
  ctx = document.getElementById("chart_d").getContext("2d");
  mychart = new Chart(ctx).Bar(data);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#chart_a,
  #chart_c {
      width: 320px;
      height: 200px;
  }
  
  #chart_b,
  #chart_d {
      width: 320px;
      height: 350px;
  }
  
  .label {
      text-align: center; 
      width: 600px; 
      font-size: 20px; 
      font-weight: bold; 
      margin: 20px;
  }
  
  .chart_container {
      float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"&gt;&lt;/script&gt;
  &lt;div id="aligned"&gt;
    &lt;div class="label"&gt;Aligned&lt;/div&gt;  
    &lt;div class="chart_container"&gt;
      &lt;canvas id="chart_a"&gt;&lt;/canvas&gt;  
    &lt;/div&gt;
  
    &lt;div class="chart_container"&gt;
      &lt;canvas id="chart_b"&gt;&lt;/canvas&gt;  
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="unaligned"&gt;
    &lt;div class="label"&gt;Unligned&lt;/div&gt;  
    &lt;div class="chart_container"&gt;
      &lt;canvas id="chart_c"&gt;&lt;/canvas&gt;  
    &lt;/div&gt;
  
    &lt;div class="chart_container"&gt;
      &lt;canvas id="chart_d"&gt;&lt;/canvas&gt;  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>