title: Flotcharts: How to place the legend on the right of the chart
body: <p>So I have this chart that I generated with flotcharts library:</p>
  
  <p><img src="https://i.stack.imgur.com/p8tyq.png" alt="enter image description here"></p>
  
  <p>And the HTML is:</p>
  
  <pre><code>&lt;div class="demo-container"&gt;
      &lt;div id="legend-container"&gt;&lt;/div&gt;
      &lt;div id="placeholder" class="demo-placeholder"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I want to put the legend outside of the chart. So I start using this in my plot options:</p>
  
  <pre><code>var options = {
      ...,
      legend:{         
          container:$("#legend-container"),
      }
      ...
  }
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#legend-container {
      background-color: #fff;
      padding: 2px;
      margin-bottom: 8px;
      border-radius: 3px 3px 3px 3px;
      border: 1px solid #E6E6E6;
      display: inline-block;
      margin: 0 auto;
  }
  </code></pre>
  
  <p>The result is:</p>
  
  <p><img src="https://i.stack.imgur.com/pRmIh.png" alt="enter image description here"></p>
  
  <p>That's great! But now I want to place the legend, not on top of (or on the bottom of) the chart, but on the right, on that blank &amp; white space that there is next to the chart.</p>
  
  <p>How to do it?</p>
  
  <p>For completeness, the rest of my CSS is:</p>
  
  <pre><code>.demo-container {
      box-sizing: border-box;
      width: 750px;
      height: 300px;
      padding: 20px 15px 15px 15px;
      margin: 15px auto 30px auto;
      border: 1px solid #ddd;
      background: #fff;
      background: linear-gradient(#f6f6f6 0, #fff 50px);
      background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
      background: -ms-linear-gradient(#f6f6f6 0, #fff 50px);
      background: -moz-linear-gradient(#f6f6f6 0, #fff 50px);
      background: -webkit-linear-gradient(#f6f6f6 0, #fff 50px);
      box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      -o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      -ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      -moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      -webkit-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
  }
  
  .demo-placeholder {
      width: 80%;
      height: 80%;
      font-size: 14px;
      line-height: 1.2em;
  }
  </code></pre>