Extend (stepped) Line in Composed Chart

[master117]

Hi, I have a composed chart of Stacked Bars and a stepped Line.

I would like to extend the line to the start of the graph and the end of the graph. Is this possible? Should I use something else to draw the line than a line chart?

[ckifer]

Since this is a composed, categorical chart and Bars are present the line ends at the category itself. Anything before that has no additional category to connect to, but the domain has to be extended in order to fit the bar.

As for solutions.. I'm pretty sure this is your best bet unless you'd like to make a custom line. A stepped reference line isn't realistically possible. On mobile right now but I can try to help with a custom line later

[ckifer]

Ah sorry, I just mean that there isn't a way to do it by default so what you have is the best you're going to get without a custom line component.

Eventually, we should maybe add a prop that extends lines to the min domain/max domain no matter what.

[ckifer]

Would you be able to throw what you currently have in a codesandbox so I can help?

[ckifer]

Here is an old issue I found with a potential but ugly workaround #1669

You could also attempt to do it with a LineChart component and then use a customized bar similar to this example https://github.com/recharts/recharts/blob/3.x/storybook/stories/API/component/Customized.stories.tsx#L37-L90

[master117]

Here is a codesandbox of the issue https://codesandbox.io/p/sandbox/jolly-heyrovsky-pd728v

[ckifer]

Really quite ugly but it works