React Recharts- getting data from different array names

Question

I have an app that shows a graph by date and brand . Unfortunately I'm new to react and recharts and i dont know how to get the specific data that I want. For now I am using an area chart

as for my data

 const data1 = [ { "data1result": [ { "brand": "brand1" }, { "brand": "brand2" }, { "brand": "brand3" }, { "brand": "brand4" } ] } ]; const data2 = [ { "data2result": [ { "date": "12-01", "details": [ { "amount": 24250, "brand": "brand1" }, { "amount": 68350, "brand": "brand2" }, { "amount": 60, "brand": "brand3" }, { "amount": 11078, "brand": "brand4" } ] }, { "date": "12-02", "details": [ { "amount": 27340, "brand": "brand1" }, { "amount": 16500, "brand": "brand2" }, { "amount": 210, "brand": "brand3" }, { "amount": 23229, "brand": "brand4" } ] }, { "date": "12-03", "details": [ { "amount": 24250, "brand": "brand1" }, { "amount": 68350, "brand": "brand2" }, { "amount": 60, "brand": "brand3" }, { "amount": 11078, "brand": "brand4" } ] } ] } ]; 

and for my code

 export default React.createClass({ render() { return ( <ResponsiveContainer width="100%" aspect={3}> <AreaChart width={600} height={400} data={data} margin={{top: 10, right: 30, left: 0, bottom: 0}}> <XAxis height={60} tick={<CustomizedAxisTick/>} dataKey="name"/> <YAxis/> <CartesianGrid strokeDasharray="3 3"/> <Tooltip/> {data1[0].data1result.map(function(c, index) { return ( <Area type='monotone' dataKey={c.name} stroke={colors[index % colors.length]} fill={colors[index % colors.length]} fillOpacity={0.3}/> ) })} <Legend/> </AreaChart> </ResponsiveContainer> )} }) 

and output should be like this

Thank you in advance :)

Answer 1

You need to construct your data as 0-indexed array of objects.

let graphData = [
{
    date: "12-01",
    brand1: 24250,
    brand2: 68350,
    brand3: 60,
    brand4: 11078,
},
{
    date: "12-02",
    brand1: 27340,
    brand2: 16500,
    brand3: 210,
    brand4: 23229,
},
{
    date: "12-03",
    brand1: 24250,
    brand2: 68350,
    brand3: 60,
    brand4: 11078,
}]

And your component will look like this

export default React.createClass({
_drawAreas(){
    let data = this.state.data || [];
    let dataSet = data[0], areaArr = [];        
    let count = 0, len = Object.keys(dataSet).length;
    let colorCodes = ["#17607D", "#F2D8A7", "#1FCECB", "#FF9311", "#003D5C", "#F27649", "#D5CDB6", "#008C74", "#30588C", "#263138"]
    for(let i in dataSet){
        if(dataSet.hasOwnProperty(i) && i != 'date'){
            areaArr.push(<Area type='monotone' dataKey={i} stroke={colorCodes[count]} key={`area-chart-${count}`} fill={colorCodes[count]}/>)               
            count++;
        } 
    }
    return areaArr;
}



render() {
return (
  <ResponsiveContainer width="100%" aspect={3}>
      <AreaChart width={600} height={400} data={this.state.data}
              margin={{top: 10, right: 30, left: 0, bottom: 0}}>
          <XAxis height={60} dataKey="date"/>
          <YAxis/>
          <CartesianGrid strokeDasharray="3 3"/>
          <Tooltip/>
          {this._drawAreas()}
         <Legend/>
      </AreaChart>
  </ResponsiveContainer>
)} })