D3 NGX Line Chart appearing to have a height when it shouldn't

Question

I'm having a strange issue with my ngx-charts line chart.

If you take a look at the GIF below, you'll see 2 line charts. The first one has the bug, the second one is fine.

The values for the first chart total out to be zero., yet the chart appears to have a value at every x-axis point. It should not have that height, it should be flat on the bottom of the chart like the 2nd chart is.

Values that created 1st chart (every item in the list has a value of 0):

[{"value":0,"date":"Mar 18, 12:00 AM"},{"value":0,"date":"Mar 18, 1:00 AM"},{"value":0,"date":"Mar 18, 2:00 AM"},{"value":0,"date":"Mar 18, 3:00 AM"},{"value":0,"date":"Mar 18, 4:00 AM"},{"value":0,"date":"Mar 18, 5:00 AM"},{"value":0,"date":"Mar 18, 6:00 AM"},{"value":0,"date":"Mar 18, 7:00 AM"},{"value":0,"date":"Mar 18, 8:00 AM"},{"value":0,"date":"Mar 18, 9:00 AM"},{"value":0,"date":"Mar 18, 10:00 AM"},{"value":0,"date":"Mar 18, 11:00 AM"},{"value":0,"date":"Mar 18, 12:00 PM"},{"value":0,"date":"Mar 18, 1:00 PM"},{"value":0,"date":"Mar 18, 2:00 PM"},{"value":0,"date":"Mar 18, 3:00 PM"},{"value":0,"date":"Mar 18, 4:00 PM"},{"value":0,"date":"Mar 18, 5:00 PM"},{"value":0,"date":"Mar 18, 6:00 PM"},{"value":0,"date":"Mar 18, 7:00 PM"},{"value":0,"date":"Mar 18, 8:00 PM"},{"value":0,"date":"Mar 18, 9:00 PM"},{"value":0,"date":"Mar 18, 10:00 PM"},{"value":0,"date":"Mar 18, 11:00 PM"}]

Values that created 2nd chart (every item in the list except for 2 items have a value of 0. The other 2 items are what makes the chart line move upward):

[{"value":0,"date":"Feb 16"},{"value":0,"date":"Feb 17"},{"value":0,"date":"Feb 18"},{"value":0,"date":"Feb 19"},{"value":0,"date":"Feb 20"},{"value":0,"date":"Feb 21"},{"value":0,"date":"Feb 22"},{"value":0,"date":"Feb 23"},{"value":0,"date":"Feb 24"},{"value":0,"date":"Feb 25"},{"value":0,"date":"Feb 26"},{"value":0,"date":"Feb 27"},{"value":0,"date":"Feb 28"},{"value":0,"date":"Mar 1"},{"value":0,"date":"Mar 2"},{"value":0,"date":"Mar 3"},{"value":0,"date":"Mar 4"},{"value":0,"date":"Mar 5"},{"value":0,"date":"Mar 6"},{"value":0,"date":"Mar 7"},{"value":0,"date":"Mar 8"},{"value":0,"date":"Mar 9"},{"value":0,"date":"Mar 10"},{"value":0,"date":"Mar 11"},{"value":0,"date":"Mar 12"},{"value":0,"date":"Mar 13"},{"value":0,"date":"Mar 14"},{"value":0,"date":"Mar 15"},{"value":0,"date":"Mar 16"},{"value":200,"date":"Mar 17"},{"value":200,"date":"Mar 18"}]

I've looked all over the ngx-charts codebase, no answer found when I try modifying a wide array of settings.

Update:

Here is a gist with the raw SVG HTML.

Answer 1

The problem is perhaps, because your y-min equals your y-max (0), if you provide a yScaleMax when all your data are at 0, it can works.