title: React DataKey in Charts
body: <p>I am consuming data fixtures to fill the charts built with <a href="http://recharts.org" rel="nofollow noreferrer">Recharts</a> </p>
  
  <p>I have two objects in my data: <strong>Finances</strong> and <strong>DAU</strong></p>
  
  <pre><code>const charts = [
    {
      name: 'Finances',
      data:[
        {name: 'April', Balance: 48530, saving: 0},
        {name: 'May', Balance: 50328, saving: 1798},
        {name: 'June', Balance: 48573, saving: -1755},
        {name: 'July', Balance: 48825, saving: 252}
      ]
    },
    {
      name: 'DAU',
      data: [
        {Day: '2016-10-28', Android: 27, iOS: 12},
        {Day: '2016-10-29', Android: 20, iOS: 17},
        {Day: '2016-10-30', Android: 17, iOS: 13},
        {Day: '2016-10-31', Android: 15, iOS: 13},
        {Day: '2016-11-01', Android: 14, iOS: 11}
      ]
    }
  ];
  
  export default charts;
  </code></pre>
  
  <p>At the moment i am passing the <code>datakey</code> only for the first data object ( Finance )</p>
  
  <p>for <code>&lt;XAxis dataKey="name"/&gt;</code> and the two lines component  <code>&lt;Line type="monotone" dataKey="Balance"/&gt;</code> and  <code>&lt;Line type="monotone" dataKey="saving"/&gt;</code> </p>
  
  <p>This is my chart component</p>
  
  <pre><code>export default class Chart extends React.Component {
    render () {
      const { chart, i } = this.props;
      return (
        &lt;div&gt;
          &lt;h1&gt;{chart.name}&lt;/h1&gt;
          &lt;LineChart width={600} height={300} data={chart.data}
                margin={{top: 5, right: 30, left: 20, bottom: 5}}&gt;
           &lt;XAxis dataKey="name"/&gt;
           &lt;YAxis/&gt;
           &lt;CartesianGrid strokeDasharray="3 3"/&gt;
           &lt;Tooltip/&gt;
           &lt;Legend /&gt;
           &lt;Line type="monotone" dataKey="Balance" stroke="#82ca9d" /&gt;
           &lt;Line type="monotone" dataKey="saving" stroke="#8884d8" activeDot={{r: 8}}/&gt;
          &lt;/LineChart&gt;
        &lt;/div&gt;
      );
    }
  };
  </code></pre>
  
  <p>How can i pass the <code>dataKey</code> dynanmically in my <code>XAxis</code> and <code>Lines</code> components for the 2 objects <strong>Finances</strong> and <strong>DAU</strong> ?</p>