title: recharts legend above chart
body: <p>Sorry I don't show the whole code, but it's private-owned by my company.
  Here's a picture. Opening the link you'll understand what I mean. (I can't understand the reason short questions aren't allowed at Stackoverflow)</p>
  
  <p><a href="https://i.stack.imgur.com/TPt1x.png" rel="noreferrer">Legend (dates) intersects labels in chart</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var barStores = [];
        //for (let n = 0; n &lt; this.state.storeNames.length; n++) {
        for (let n = 0; n &lt; 100; n++) {
          let storeName = this.state.storeNames[n];
          let randc = getRandomColor();
          barStores.push(
            &lt;Bar dataKey = {storeName} stackId = "a" fill = {randc}  /&gt;
          );
        }
  
        const graph = (
          &lt;BarChart width={1200} height={700} data={data2}
              margin={{top: 20, right: 30, left: 20, bottom: 5}}&gt;
            &lt;CartesianGrid strokeDasharray="3 3" /&gt;
            &lt;XAxis type="category" dataKey="name" angle={-45} textAnchor="end"/&gt;
            &lt;YAxis type="number" /&gt;
            &lt;Tooltip /&gt;
            &lt;Legend verticalAlign = "bottom" /&gt;
            {barStores}
          &lt;/BarChart&gt;
        );
        return graph;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  #container {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    width: 800px;
    /*height: 800px;*/
    background-color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="theme-color" content="#000000"&gt;
      &lt;title&gt;Panel - BigQuery&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="theme.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="root"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>