How can I render the LineChart inside a Bar using rechart library?

16 Views Asked by At

enter image description here

This is my data set

  {
    month: "Jan",
    barValue: 10,
    lineData: [
      { day: "1", value: 10 },
      { day: "2", value: 15 },
      // more data for Jan 
    ],
  },
  {
    month: "Feb",
    barValue: 15,
    lineData: [
      { day: "1", value: 20 },
      { day: "2", value: 25 },
      // more data for Feb
    ],
  },
  // more data for other months
];

I have tried a lot of experiment using the re-charts to generate a chart like this but I am not able to. I think this is called Line chart in bar maybe? Can anyone please help me on this? I can change the data set's data structure if you want.

I tried this as well which did not work.

        {data.map((entry, index) => (
          <LineChart
            key={`line-chart-${index}`}
            width={30} // Adjust the width as needed
            height={50} // Adjust the height as needed
            data={entry.lineData}
            margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
          >
            <Line type="monotone" dataKey="value" stroke="#82ca9d" dot={false} />
          </LineChart>
        ))}
      </Bar>
    ```

Thanks in advance.

0

There are 0 best solutions below