Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

216
Vistas
How to convert dynamically changing dataKey for rechart

I have used rechart to create a Line chart.

my code is like

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>
      
    );

}

Now, I need to pass values for {name: 10, FL: 2400, TM: 2400} dynamically like {name: 10, {category}: {value}} where 'category' and 'value' are just variables. Simply, I need to assign value as

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

I was able to pass value for {value} but still I could not do the same for {category}. Can anybody help?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

data.push( {name: 80,[category] : {value}});
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda