Line (or area) chart with partial segments

[RobinBertilsson]

Hi again 👋
What do you think should be the approach to archive the following (see image)?

Would it be possible to use the high-level XYChart component, or would you have to dig deeper?
Regarding splitting the line into (in this case) two segments I guess I can use SplitLinePath, but would you do the partial area thing?

I really appreciate any help you can provide.
/R

[RobinBertilsson]

Anyone? I could really need some help 😅

[williaster]

the easiest way to do this is to split the data into two, one for past/future, and render two series. here's a quick demo

BUT where this gets hard is the interpolation. if you have curveLinear (ie no interpolation) it looks fine, but if you have curvy lines like your design, the interpolation on the end points of the two series won't match and (depending on the data shape) it will look bad. that's why splitlinepath exists. it currently doesn't work with xychart but it could be integrated or you could write a custom series component that uses it under the hood.

[RobinBertilsson]

Thanks for your help! I actually got it working just prior to your answer, but as you said regarding the curve, the <SplitLinePath /> was very much needed, and solved it all once I got the hang of it.

I'll make sure to share my code here, for others that might be facing the same issue.

[imjared]

@RobinBertilsson before we get too far into the future, wondering if you might still have your code available

[RobinBertilsson]

I'm afraid i dont, but i'm quite sure it was just a matter of splitting the data into multiple segments, e.g. [1, 2, 3, 4] -> [[1, 2], [3, 4]] and then use <SplitLinePath />, it was much easier than i thought.