Component | Line: Allow lines to be stacked (combine with stacked areas)

[aguingand]

Problem

Today we can put lines over classic areas (same y) but not over stacked area (stacked y). It can be useful for some design systems (e.g. https://www.shadcn-vue.com/charts/area#charts).

Solution

Add a stacked boolean config for Line component.

Todo

•  Fix crosshair circles Y : the circle Y for stacked line is upside areas when combining the twos. Workaround, pass getCircles config to Crosshair.

Alternative solution

Another solution would be to add a line config to Area but it seems less configurable.

[lee00678]

Problem

Today we can put lines over classic areas (same y) but not over stacked area (stacked y). It can be useful for some design systems (e.g. https://www.shadcn-vue.com/charts/area#charts).

Solution

Add a stacked boolean config for Line component.

Todo

•  Fix crosshair circles Y : the circle Y for stacked line is upside areas when combining the twos. Workaround, pass getCircles config to Crosshair.

Alternative solution

Another solution would be to add a line config to Area but it seems less configurable.

@aguingand thanks for the contribution, I think I prefer the current solution

Add a stacked boolean config for Line component.

[rokotyan]

I feel like this will require hacking the behavior of Crosshair, and I'm not sure how I feel about it. Adding a set of line configs to Area sounds more reasonable to me. But I'll give it another thought.

[aguingand]

@rokotyan I'm also leaning towards line config in area solution, it's also simpler DX (one component instead of 2 to add a stroke to already existing shapes). I will open another PR.

[lee00678]

I feel like this will require hacking the behavior of Crosshair, and I'm not sure how I feel about it. Adding a set of line configs to Area sounds more reasonable to me. But I'll give it another thought.

How is that differ from how we handle area and stacked bar? You should be able to just pass yStacked into crosshair, right? or am I mistaken?

[rokotyan]

How is that differ from how we handle area and stacked bar? You should be able to just pass yStacked into crosshair, right? or am I mistaken?

@lee00678 There will be a problem with Crosshair circles. We don't want to show circles for the lines in this case since they are purely decorative, and this will require some hacking.

[lee00678]

How is that differ from how we handle area and stacked bar? You should be able to just pass yStacked into crosshair, right? or am I mistaken?

@lee00678 There will be a problem with Crosshair circles. We don't want to show circles for the lines in this case since they are purely decorative, and this will require some hacking.

I see. Ok, then maybe we should consider these as separate features. I still see having stacked line a valid addition to the library.

[rokotyan]

I still see having stacked line a valid addition to the library.

@lee00678 Could you elaborate on that a bit more? Specifically, what use cases do you see for a stacked line chart? I'm afraid it might bring more confusion than benefits, and extra code to maintain.

[lee00678]

I still see having stacked line a valid addition to the library.

@lee00678 Could you elaborate on that a bit more? Specifically, what use cases do you see for a stacked line chart? I'm afraid it might bring more confusion than benefits, and extra code to maintain.

Yes, I think for cases like undefined/null data, we can use interpolated lines to indicate that, whereas area chart doesn't provide that functionality.

[rokotyan]

@lee00678 You mean if we use it with Area? I get your point, but this will have problems with Crosshair that I described above. I don't mind merging this if we implement a way to opt-out a component from working with Crosshair and provide a public example.

[lee00678]

@lee00678 You mean if we use it with Area? I get your point, but this will have problems with Crosshair that I described above. I don't mind merging this if we implement a way to opt-out a component from working with Crosshair and provide a public example.

I get your point for crosshair, I will think about it and see what's the best approach.

[lee00678]

Marking as Draft for now.