[charts] Allow line chart to connect nulls and also create gaps

[camilova]

Summary

I was trying to show on a line chart both concepts: null values connected and gaps. But I did not found any form to archive that.

I tried to set undefined to the values, but this seems to be the same as null, and having the connectNulls option connects undefined too.

I tried to set transparent color to the line when I detect that some value represent a "gap" value, without luck because setting a custom component for line in the slots dont give me context to know wich data / serie im rendering on the line component props.

In my use case, I'm rendering several lines series, using dataset. The x-axis is time, the y-axis is simple integer numbers, but the problem is that for some series, there are values on some x-axis points, and for other series values are on other x-axis points, then to complain with the data structure a chart line expects, on every x-axis value I put null values for other series that have not real values. So if I do not use connectNulls option, there are tiny gaps between the series data, and using the option make the lines connected, but do not allow me to show data gaps.

Is this possible to render both cases? I could not find a way to do that.

If not, maybe it can show "undefined" values as data gaps, and as opposite connect the null ones. But it does not preserve retrocompatibility with actual connectNulls values I think, so it could receive an option called "gapUndefined" or something like that to not render undefined values (and letting nulls be connected).

Examples

No response

Motivation

No response

Search keywords: charts line gap nulls

[michelengelen]

@alexfauquette would this be achievable with a workaround? idk to be honest! 😅

[camilova]

I was trying to do a workaround but with no luck. I think if the props passed to a Line component could include some context about the series and/or data being rendered (for example the Y values associated to this line segment) it could be done, because having that info I could choose to apply a transparent color for the line (maybe not the cleanest solution).

With the Line props I mean the props received by the custom component set trough slots in the LineChart.

slots={{ line: MyCustomLineComponent }}

[JCQuintas]

Right now this is not natively supported. Have you tried using the concepts in line with forecast as a base? It is not a trivial task though.

I think the main issue from your complain is that the line component is not really rendered for each dataIndex, but it is a continuous line, hence you won't receive any dataIndex in it, since that is calculated beforehand.

To bypass that you would have to calculate which of the indexes are empty, either inside the CustomLine + unstable_useLineSeries() or in your base component and pass it as slotProps={{ line... }}

[alexfauquette]

Effectively, the root cause seems to be the dataset that assumes all points are part of the series.

The complexity would be to ignore the undefined when redering the line without removing them, to do not disturbe the dataIndex which is necessary to keep the line correct with point/band-scale

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.