React Recharts how can i pass multiple columns of data for each chart?

I have build my own rechart tooltip element, and i can managed, to autogenerate the charts from an input folder, and i also managed to show tooltips for each chart and for each columns. My problem is, that each column shows the first column's name and value. I tried to map through my data array, but then it didn't show anything. Here is my code:

Chart1.js for building the charts

 const dataForView = [
            {
              name: '', data: props.teszt.Location_name,
            },
            {
              name: 'PCA value', data: props.teszt.PCA_value,
            },
            {
              name: 'bulding Cells', data: props.teszt.Cells_where_building_label,
            },
            {
              name: 'vegetation Cells', data: props.teszt.Cells_where_vegetation_label,
            },
            {
              name: 'Avg buildings', data: props.teszt.Avg_building_labels,
            },
            {
              name: 'Avg vegetation', data: props.teszt.Avg_vegetation_labels,
            },
            {
              name: "", data: props.teszt.Picture_name,
            },
          ];
    
      const id = 1;
    
      const renderTooltip = () => {
        const fax = Object.keys(jsons).map((index) =>
          <AreaChartTooltip data={dataForView[index]} i={index} />
        );
    
        return (
            /* fax */
            <AreaChartTooltip data={dataForView} i={id} />
        )
      };
    
      return (
      <BarChart
            width={800}
            height={400}
            data={data}
            margin={{
              top: 20, left: 20
            }}
            centered
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="name" />
            <YAxis />
            <Tooltip content={renderTooltip} />
            <Legend />
            <Bar dataKey="data" fill="#9aad45">
            <LabelList dataKey="data" position="top" />
            </Bar>
          </BarChart>
      );
    }

And the built ChartTooiltip - chartCard.js

  export default function AreaChartTooltip(props) {
  const classes = useStyles();
  const {data = {}, i} = props;
  const [expanded, setExpanded] = React.useState(false);

  const handleExpandClick = () => {
    setExpanded(!expanded);
  };

  return (
    <Card className={classes.root}>
      <CardHeader
        title={data[0].data}
        subheader={data[i].name +": "+ data[i].data}
      />
      <CardMedia
        className={classes.media}
        title="maps"
        image={image}
        style={styles.media}
      />
      <CardContent>
        <Typography variant="body2" color="textSecondary" component="p">
        </Typography>
      </CardContent>
     ...

And below this § that is the image, as you can see each column of the chart is showing the first column's name and value. The tooltip's title is working fine, it always shows the actual chart name, cause that is always the 0. element of the array.

chartimage



Read more here: https://stackoverflow.com/questions/66339772/react-recharts-how-can-i-pass-multiple-columns-of-data-for-each-chart

Content Attribution

This content was originally published by Paterik4 at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: