Base on following example code, I have created a Line chart.
const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data1 = [
{time: 10, pv: 2400},
{time: 10, amt: 1300},
{time: 20, pv: 500},
{time: 20, amt: 1350},
{time: 30, pv: 3200},
{time: 30, amt: 4400},
];
const SimpleLineChart = React.createClass({
render () {
return (
<LineChart width={600} height={300}
margin={{top: 5, right: 30, left: 20, bottom: 5}}>
<XAxis type="number" dataKey="name" domain={['auto', 'auto']} />
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" data={data1} dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
</LineChart>
);
}
})
ReactDOM.render(
<SimpleLineChart />,
document.getElementById('container')
);
But my actual requirement is to pass 'dataKey' ( In here 'pv', 'amt' so on) dynamically without hard coding like 'pv' or 'amt'.
response_arr.forEach((item, index) => {
var category = response_arr[index].category;
newArray.push({ time: response_arr[index].dateTime, {this.category}: response_arr[index].value });
})
However, the above code snippet (this.category) is not allowed in javascript. Can anybody help me to achieve this problem.