Search code examples
reactjschartsrecharts

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

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

Solution

  • 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.