title: Chartjs custom dynamic legend overflowing
body: <p>I dynamically create my chartjs legend.</p>
  
  <p>I want my chart to dynamically expand vertically to fit the parent, I do this with <code>maintainAspectRatio: false</code> property in the chart options. </p>
  
  <p>I also want my legend and chart to fit within the parent container. The problem is that chartjs doesn't see the dynamically generated legend and gives the chart a <code>height</code> of <code>480px</code>. This means that the legend is pushed outside of the parent container instead of fitting inside it.</p>
  
  <p>Here's a jsfiddle showing the problem:</p>
  
  <p><a href="http://jsfiddle.net/vrwjfg9z/4292/" rel="nofollow noreferrer">http://jsfiddle.net/vrwjfg9z/4292/</a></p>
  
  <p>How do I generate a legend dynamically but also tell chartjs to take it's height into account so that it doesn't push the legend outside of it's container?</p>
  
  <p>Javascript:</p>
  
  <pre><code>var data = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
          {
              backgroundColor: "rgba(255,99,132,0.2)",
              borderColor: "rgba(255,99,132,1)",
              borderWidth: 2,
              hoverBackgroundColor: "rgba(255,99,132,0.4)",
              hoverBorderColor: "rgba(255,99,132,1)",
              data: [65, 59, 20, 81, 56, 55, 40],
          }
      ]
  };
  
  var options = {
    legend: {
      display: false,
    },
    maintainAspectRatio: false,
      scales: {
      yAxes:[{
              stacked:true,
          gridLines: {
              display:true,
            color:"rgba(255,99,132,0.2)"
          }
      }],
      xAxes:[{
              gridLines: {
              display:false
          }
      }]
    }
  }
  
  var canvas = document.getElementById("myChart");
  
  var myChart = Chart.Bar(canvas, {
    data: data,
    options: options,
  });
  
  // Note - tooltipTemplate is for the string that shows in the tooltip
  
  // legendTemplate is if you want to generate an HTML legend for the chart and use somewhere else on the page
  
  // e.g:
  
  document.getElementById('js-legend').innerHTML = "This dynamically generated line of text should be within chart-container but it is incorrect"
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class='root'&gt;
    &lt;div class='chart-container'&gt;
      &lt;div class='chart'&gt;
        &lt;canvas id="myChart" style="width: 100%; height: auto;"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div&gt;This line of text should be within chart-container and it is correct&lt;/div&gt;
       &lt;div id="js-legend"&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Css:</p>
  
  <pre><code>.root {
    height: 500px;
  }
  .chart-container {
    display: flex;
    flex-direction: column;
    border: solid 2px red;
    height: 100%;
    position: relative;
    width: 500px;
  }
  
  .chart {
    flex: 1;
  }
  </code></pre>