Line chart with gap in data

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here

Current behavior

I can’t get the line chart to draw a graph with a gap in it’s data. And it doesn’t seem to be documented here https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html I tried to set my data to both null or undefined. Null results in it being 0 and undefined keeps it from drawing. For e.g.:

  {
    "name": "Germany",
    "series": [
      {
        "name": "2010",
        "value": 7300000
      },
      {
        "name": "2011",
        "value": 8940000
      },
      {
        "name": "2012",
        "value": null
      },
      {
        "name": "2013",
        "value": 8940000
      }
    ]
  },

Expected behavior

Not sure about undefined or null as the api here, but I would expect the graph to just stop drawing at the point before and start drawing again on the point after. So that we just get a gap where not data is.

Reproduction of the problem

Just use the plnkr from https://swimlane.gitbooks.io/ngx-charts/content/charts/line-chart.html and replace the data with the above.

What is the motivation / use case for changing the behavior?

The intention is to communicate, that there are no values for that timespan available.

Please tell us about your environment:

Shouldn’t matter, I will get back to you if it does.

• ngx-charts version: x.x.x

Shouldn’t matter, I will get back to you if it does.

• Angular version: 2.x.x

Shouldn’t matter, I will get back to you if it does.

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Shouldn’t matter, I will get back to you if it does.

• Language: [all | TypeScript X.X | ES6/7 | ES5] Shouldn’t matter, I will get back to you if it does.

[Moulde]

I have the same issue. The areachart is visualized correctly ie. no border or point is visible, but the point still exists, and when i mouse over the point it will throw an error when trying to create the tooltip due to the value being null. Reading null as a 0 is IMO not correct, as 0 is in most cases, a valid value, whereas null or NaN indicates that the point has no value.

It’s also not a solution to just skip the points with null values, as that skews the chart, at least in the case of x value being a timestamp.

Would adding a configuration flag, maybe makeNullPointInvisible with a default value of False, and use this to decide if it should visualize the point, be a solution? (ofc the hardest part is what to call the parameter…) That way the current handling will stay the same, but setting the flag to true, will make it place a invisible point, and not show any tooltips. But the point will still take up room in the chart.

[End-S]

I have found that if you provide a series with the same name, ngx-charts groups this as a single entry in the legend. This means that you can split the series up every time your data contains a null value and your plotted line will display with gaps. For example:

results: any[] = [
    {
      'name': 'Saint Pierre and Miquelon',
      'series': [
        {
          'value': 6182,
          'name': '2016-09-22T13:44:43.081Z'
        },
        {
          'value': 4938,
          'name': '2016-09-23T00:29:51.341Z'
        },
        {
          'value': 5137,
          'name': '2016-09-17T02:59:36.606Z'
        },
        {
          'value': 2841,
          'name': '2016-09-21T11:01:36.508Z'
        },
        {
          'value': 6347,
          'name': '2016-09-19T21:28:14.801Z'
        },
      ],
    },
    // A null value would have occurred here
    {
      'name': 'Saint Pierre and Miquelon',
      'series': [
        {
          'value': 7347,
          'name': '2016-09-19T23:28:14.801Z'
        },
        {
          'value': 5347,
          'name': '2016-10-19T11:28:14.801Z'
        }
      ]
    }
  ];

I appreciate this is not a complete solution but if you are plotting against time it should be a clean workaround until null values get support.