'key' issue in Line graph with null values in data

Commit #81 was intended to enable linecharts with missing data points (nulls). It works but there are certain conditions that create duplicate keys which leads to a lot of these errors: Because of the flattening of children the line between dots is not being drawn even though it should. If animate={true} there is a ‘runaway’ error condition and errors go into the thousands within seconds, with animate={false} errors only occur on prop change. Again, it only happens if multiple lines are drawn i.e. [ { id: 19, data: [{x: ....., y: .....}, .....], {id: 30. data: [....]} ] I’m fairly certain I’m passing the correct props and I believe that passing null as certain y’s leads to the duplicate key issue.

[ahtohbi4]

I have found a difference of x values in your data. For example item with value { x: "10-10-00", y: <any value> } exist in the first collection, but was missed in the second one.

How I understand the ideology of the library, dataset for each Line should have the same length and should consist of the identical sets of x values.

Wrong (your case):

[
  {
    "id": "15",
    "data": [
      { "x": "01-01-00", "y": 5 },
      { "x": "03-01-00", "y": 3 },
      { "x": "04-01-00", "y": null }
    ]
  },
  {
    "id": "30",
    "data": [
      { "x": "01-01-00", "y": 7 },
      { "x": "02-01-00", "y": 12 },
      { "x": "04-01-00", "y": 2 }
    ]
  }
]

Correct:

[
  {
    "id": "15",
    "data": [
      { "x": "01-01-00", "y": 5 },
      { "x": "02-01-00", "y": null },
      { "x": "03-01-00", "y": 3 },
      { "x": "04-01-00", "y": null }
    ]
  },
  {
    "id": "30",
    "data": [
      { "x": "01-01-00", "y": 7 },
      { "x": "02-01-00", "y": 12 },
      { "x": "03-01-00", "y": null },
      { "x": "04-01-00", "y": 2 }
    ]
  }
]

So, you should fill missed values of x in each dataset with { "x": <missed value>, "y": null }.

@plouc, correct me, please.

[plouc]

@ahtohbi4, you’re right 👍, thank you!