He usado recargar para crear un gráfico de líneas.

mi código es como

 render(){ const {items} = this.state; var data = [ {name: 10, FL: 2400, TM: 2400}, {name: 20, FL: 1398, TM: 2210}, {name: 30, FL: 9800, TM: 2290}, {name: 40, FL: 3908, TM: 2000}, {name: 50, FL: 4800, TM: 2181}, {name: 60, FL: 3800, TM: 2500}, {name: 70, FL: 4300, TM: 2100}, ]; return ( <div> <CustomLineChart data={data}/> </div> );

customLineChart.js

 var renderLines = () => { var dynamic_array = ["FL", "TM", "LL"]; var color = ["#8884d8", "#82ca9d", "orange", "pink"] var index =0; const lines = dynamic_array.map((value,index) => ( <Line key={value} name={value} type="monotone" dataKey={value} stroke={color[index]} /> )); return lines; } var modifyFormatter = (value, name, props) => { const nameJSX = <span><span style={{ display: "inline-block", marginRight: "5px", borderRadius: "10px", width: "10px", height: "10px", backgroundColor: props.color }}></span>{name} : {value}</span> return [nameJSX]; } function CustomLineChart(props) { return ( <LineChart width={2000} height={300} data={props.data} margin={{ top: 5, right: 30, left: 20, bottom: 5, }}> <CartesianGrid strokeDasharray="3 3" horizontal={false} vertical={false} /> <XAxis dataKey={Object.keys(props.data[0])[0]} /> <YAxis /> <Tooltip formatter={modifyFormatter} /> <Legend /> {renderLines()} </LineChart> ); }

Ahora, necesito pasar valores para {nombre: 10, FL: 2400, TM: 2400} dinámicamente como {nombre: 10, {categoría}: {valor}} donde 'categoría' y 'valor' son solo variables. Simplemente, necesito asignar valor como

 data.push( {name: 80,{category} : {value}});

Pude pasar el valor de {value} pero aún así no pude hacer lo mismo para { category }. ¿Alguien puede ayudar?