Chart won't render if all values are 0

[sauladam]

Only tested this with Line and Area charts:

If all values are 0, the chart's SVG-path is not rendered properly because it has a bunch of NaNs in it, like so:

<path 
    stroke="#3fb1e3" 
    fill="none" 
    stroke-width="1" 
    style="stroke-dasharray: none; transition: none 0s ease 0s;"     
    d="M0,NaNC0,NaN,38.09375,NaN,57.140625,NaNC76.1875,NaN,95.234375,NaN,114.28125,NaNC133.328125,NaN,152.375,NaN,171.421875,NaNC190.46875,NaN,209.515625,NaN,228.5625,NaNC247.609375,NaN,266.65625,NaN,285.703125,NaNC304.75,NaN,323.796875,NaN,342.84375,NaNC361.890625,NaN,399.984375,NaN,399.984375,NaN">
</path>

There's probably just an issue with the math somewhere. As long as at least 1 value is not 0, everything works fine.

I hope it's an easy fix and will be fixed soon. Thank you for this awesome library!

[jaunt]

I also noticed that the same problem results if all y values are the same, regardless if they are zero or not. I think it's the autoscaling feature. I haven't tried to reproduce this bug in 0.2.0 yet.

[pzduniak]

vue.runtime.esm.js?2b0e:6394 Error: <path> attribute d: Expected number, "M48,NaNZ".

I'm getting a bunch of errors like this, also when all values are 0, the whole thing gets "compressed" like so:

Any ideas on how I could work around it? Unfortunately having a static invisible line won't work because the chart is stacked.

[sauladam]

The way I've worked around it is by only rendering the graph if not all values are 0. If they are, I just display a message like "no data available". While this works ok and may be a reasonable statement for a 60 days trend chart, it probably would sound quite off in your case for a 60 seconds period. Maybe something like "No events occured" could work.

In any case it's not ideal and really hope there will be a fix soon :pray:

[dvago]

The problem is around the curPoints computed property of the Cartesian.js, line 32 and 33 Apparently every time the values are 0.something both y and y0 return NaN

        const y = isNaN(end) ? null : y1 - (end - low) * yRatio
        const y0 = isNaN(start) ? null : y1 - (start - low) * yRatio

These statements runs into the else and the else returns NaN You can edit the code with something like:

if (isNaN(y)) {
     y = 0
}
if (isNaN(y0)) {
     y0 = 0
}
if (isNaN(x)) {
     x = 0
}

to avoid console errors but the graph doesn't look right.

[dvago]

Further investigation tells me that yRatio has Infinity, it might be the main problem

[dvago]

Solved with:

if (yRatio === Infinity) {
     yRatio = 1
}

Line 835 of laue.js from the dist folder

or

Line 31 of cartesian.js