title: Chart.js legend alignment
body: <p>I'm creating a pie chart using Chart.JS tool. So far i have achieved to create a 2 pie charts. <a href="https://i.stack.imgur.com/LzfPC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LzfPC.png" alt="enter image description here"></a> </p>
  
  <p>The issue is that it shifts the second pie chart to the left. I have used legend.position = ** left**. </p>
  
  <p>But when i try to modify the position to <strong>bottom</strong> , first pie chart shrinks <a href="https://i.stack.imgur.com/gfoHA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gfoHA.png" alt="enter image description here"></a>   </p>
  
  <p>HTML CODE</p>
  
  <pre><code>&lt;div id="sidebar-wrapper"&gt;
              &lt;div class="col-lg-12 pie-chart" style=""&gt;
                  &lt;div class="row" &gt;
                      &lt;div class='col-12 chart-container' &gt;&lt;canvas id="myChart"&gt;&lt;/canvas&gt;&lt;/div&gt;
                      &lt;div class='col-12 chart-container' &gt;&lt;canvas id="subChart"&gt;&lt;/canvas&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS CODE</p>
  
  <pre><code>body &gt; .pie-chart{
      padding:10px;margin-top:60px;height:32vh;background-color:white;
  }
  body &gt; .pie-chart &gt;.chart-container{
      margin-top: 15px;
  }
  #myChart {
      margin-top: 90px;
      height:180px;
  }
  #subChart {   
      margin-top: 30px;
      height:180px;
  }
  </code></pre>
  
  <p>This is my js code to create pie chart.</p>
  
  <pre><code> createGraph: function (canvasElement, data, backgroundColor, labels, clickCallback, renderCallBack) {
                  var config = {
                      type: 'pie',
                      data: {
                          datasets: [{
                                  data: data,
                                  backgroundColor: backgroundColor
                              }],
                          labels: labels
                      },
                      options: {
                          responsive: false,
                          legend: {
                              position: 'left',
                              onHover: function (e) {
                                  e.target.style.cursor = 'pointer';
                              },
                              labels: {
                                  fontSize: 13,
                                  fontStyle: 'bold'
                              },
                          },
                          title: {display: false},
                          animation: {animateScale: false, animateRotate: false},
                          hover: {
                              onHover: GraphController.hoverChart
                          }
                      }
                  };
                  if (clickCallback) {
                      config.options.legend.onClick = clickCallback; //click on labels
                      config.options.onClick = clickCallback; // click on pie
                  }
                  if (renderCallBack) {
                      config.options.legend.onRender = renderCallBack;
                  }
                  if (canvasElement.id = "subChart") {
                      // set subchart height and width so that the chart chart doesn't blur
                      $('#subChart').attr('height', $("#myChart").attr('height'));
                      $('#subChart').attr('width', $("#myChart").attr('width'));
                  }
                  return new Chart(canvasElement, config);
      }
  </code></pre>
  
  <p>Can anybody point out me what i am missing out. Thanks in advance</p>