snippets : multi line chart - adnan1975/cb-smart-ac GitHub Wiki

const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts; const series = [ {name: 'Series 1', data: [ {category: 'A', value: Math.random()}, {category: 'B', value: Math.random()}, {category: 'C', value: Math.random()} ]}, {name: 'Series 2', data: [ {category: 'B', value: Math.random()}, {category: 'C', value: Math.random()}, {category: 'D', value: Math.random()} ]}, {name: 'Series 3', data: [ {category: 'C', value: Math.random()}, {category: 'D', value: Math.random()}, {category: 'E', value: Math.random()} ]}, ];

const dataKeys = series.map(s => s.name)

const dataObj = series.reduce((obj,series) => { series.data.forEach(d => { obj[d.category] = obj[d.category] || {} obj[d.category][series.name] = d.value }) return obj }, {})

const data = Object.keys(dataObj).map(key => ({category: key, ...dataObj[key] }))

const SimpleBarChart = React.createClass({ render () { return ( {dataKeys.map(dataKey => ( ))} ); } })

ReactDOM.render( , document.getElementById('container') );