Question 74290 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How can I add separate line to my chart in recharts which will be connected with previous line? – Reactjs

I have a realization you may see on the screenshot. But this two separate lines is not connected to each other even if the end value of the first line is the same as start on the second line see the Chart

I’ve attached codesandbox realization I had made https://codesandbox.io/s/two-separate-lines-wet8f9

I have created two separate components with different data objects. The first one doesn’t contain the data from the second line

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The only answer for myself I figured out during some experiments https://codesandbox.io/s/two-separate-lines-forked-lmjlzy?file=/src/App.tsx

    If you have more apropriate solution, it would be great to see it


  2. 0

    You’re not using the correct data array. Each object in data renders a point in the chart. However, your mergedData duplicates Page E.

    [...data, ...data2]

// ->
...
{name: "Page E", uv: 1890, pv: 4800, amt: 2181},
{name: "Page E", uv: 1890, pv2: 4800, amt: 2181},
...

    So the chart renders 2 different points in X with the same name.

    What you want is a single point with both pv and pv2 values:

    {
  name: "Page E",
  pv: 4800,
  pv2: 4800,
}

    enter image description here

    Sidenote: for clarity you can remove uv and amt since there are no Line assigned for those data-key.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search