Bug - Stack Charts - lines render weirdly if they have no data

[alexcreasy]

trafficstars

Describe the problem When using stack charts with multiple lines, if there is no data (i.e. an empty array) for one of the lines it will render very bizarrely (see gif below).

How do you reproduce the problem? Create a stack chart with multiple lines, and pass an empty array as the data property to one of the ChartArea components. You'll see that the line will be plotted from x0,y0 to xmax, ymax.

As shown in the GIF below, this can be reproduced on the PF website here: https://www.patternfly.org/charts/stack-chart#multi-color-unordered-responsive-container

Expected behavior The line is not rendered if the data prop is an empty array.

Is this issue blocking you? No, we can work around using conditional rendering when e.g. prometheus gives us an empty array.

Screenshots

What is your environment?

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

What is your product and what release date are you targeting? RHOAI

Any other information?

[tlabaj]

cc @dlabrecq

[dlabrecq]

This appears to be a known issue with VictoryStack.

I can reproduce using a VictoryStack stack example.

If there is no data, omit the ChartArea component from the chart. Alternatively, you can use data={[null]}.

[tlabaj]

@alexcreasy can we close this since it is a Victory issue. Dan has provided a work around.

[alexcreasy]

@dlabrecq that victory bug has been closed for a couple of years? Is PF Charts using an older version right now, or should I look to reopen the bug with Victory?

I've already got a workaround in place for this issue on our dashboard, so that's not a problem. The reason I'd like to get this fixed is that this bug showed up in production, took a long time to figure out the root cause of and the same issue has cropped up for another dev working on a different area of our product who went through the same process.

@tlabaj thanks for the response, if possible I'd rather get this fixed so that people don't lose more time, or have more bugs show up in production.

[dlabrecq]

Like I suggested above, omit the component from the chart if there is no data. Alternatively, you can use data={[null]}.

If this does not work for you, please open an issue with Victory.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[thatblindgeye]

Since this is more a Victory issue and there are workarounds in the PF chart, I'll close this. Opening an issue with Victory may be the next best course of action as mentioned above, but if there is an issue on our end please let us know or open a followup issue.