title: React Recharts- getting data from different objects
body: <p>I am using React Recharts for my visualization, however, I am having a challenge displaying a simple bar chart with different corresponding object contents.</p>
  
  <pre><code>[
    {
      "month": "2017-07",
      "commodities": [
        { "name": "wheat", "moves": 100, "avg_weight": 167 },
        { "name": "maize", "moves": 150, "avg_weight": 367 },
        { "name": "grains", "moves": 89, "avg_weight": 467 }
      ]
    },
    {
      "month": "2017-08",
      "commodities": [
        { "name": "mangoes", "moves": 140, "avg_weight": 167 },
        { "name": "grains", "moves": 190, "avg_weight": 47 }
      ]
    },
    {
      "month": "2017-09",
      "commodities": [
        { "name": "wheat", "moves": 130, "avg_weight": 267 },
        { "name": "tomatoes", "moves": 176, "avg_weight": 132 },
        { "name": "onions", "moves": 120, "avg_weight": 47 }
      ]
    },
    {
      "month": "2018-10",
      "commodities": [
        { "name": "oranges", "moves": 130, "avg_weight": 267 },
      ]
    },
  ]
  </code></pre>
  
  <p>I have this sample json object, I would like to have the month as my XAxis and commodities' moves as my YAxs.
  Ideally, the image below is representation of how I want to display my data.
  Thank you for your assistance,.
  <a href="https://i.stack.imgur.com/kTxmk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kTxmk.jpg" alt="enter image description here"></a></p>