0

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.

enter image description here

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.

Lansana Camara
  • 9,497
  • 11
  • 47
  • 87
  • Can you give us the url of the code source of the chart ? That would be great – Wandrille Mar 18 '19 at 07:34
  • 1
    Updated question – Lansana Camara Mar 18 '19 at 07:38
  • Do you give an input for `@Input() yScaleMin: number;`? If yes, the code [here](https://github.com/swimlane/ngx-charts/blob/master/src/line-chart/line-chart.component.ts#L363) can be affected for the Y-domain. But i'm not sure that I have the right chart code. – Wandrille Mar 18 '19 at 07:43
  • After looking at my code, no, I don't give a value for `yScaleMin`. I just tried setting it to 0, no effect. Tried setting it to anything above 0 (0.00001, 1, etc), and it fills up the entire line chart instead of just half. – Lansana Camara Mar 18 '19 at 07:56
  • To be sure about the component, you called it with `ngx-charts-line-chart` ? – Wandrille Mar 18 '19 at 07:58
  • Yes. I am using a forked version with some charts that I don't need removed, but I've paired my forked version with the library and everything looks good. – Lansana Camara Mar 18 '19 at 08:00

1 Answers1

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.

Wandrille
  • 6,267
  • 3
  • 20
  • 43
  • Nice! If I do `[yScaleMax]="1"` it works. I am just curious why that is necessary... seems like something is fishy to me – Lansana Camara Mar 18 '19 at 08:09
  • When the domain is `[0,0]` or `[3,3]`, D3 will center it. Which seems not idiot. – Wandrille Mar 18 '19 at 08:10
  • Thanks a bunch for your expertise. Took me like a week to get the chart looking how it is now with no D3 experience, and was stuck on this bug for a few days. You solve it in 5 minutes! :P – Lansana Camara Mar 18 '19 at 08:11
  • You wouldn't happen to know a solution to the gradient problem I have, would you? You see how my line chart gradient "fades in" instead of being "drawn in" like the line? It's because I have CSS on the line to animate the `stroke-dashoffset`. I can't find the equivalent for the gradient, I can only make it fade in by animating it's opacity, but I want it to draw in from left to right like the line. – Lansana Camara Mar 18 '19 at 08:23
  • No sorry. Just like this I don't know. – Wandrille Mar 18 '19 at 08:28