[charts] Support 'Area Range' for Line charts

[colinnuk]

Summary

I'm wondering if there's any plans to add support for an 'area range' similar to this: https://www.highcharts.com/demo/highcharts/arearange-line

I'm sure it's possible to do this in MUI charts already using an SVG plot - but that seems quite cumbersome.

I searched high and low and couldnt see anywhere where someone had already made a chart looking like this - perhaps there's already a solution out there.

Examples

No response

Motivation

No response

Search keywords: line chart area range

[colinnuk]

Having looked at the code (https://github.com/mui/mui-x/blob/aefddd73832b8538814fd0958ded863657e4204e/packages/x-charts/src/LineChart/AreaPlot.tsx) maybe one 'easy' way to do this would be to provide additional behaiour on the stacking feature.

Ie, put your two 'range' series into the same stack, and then change the way the stack behaves.

If I have time tomorrow I'll give this a go in my own project by creating a new <AreaRangePlot /> component based on the above - unless someone provides a etter solution by then.

If it works and there's appetitie I'm happy to push my solution back into this repo.

[bernardobelchior]

Hey, @colinnuk. Yeah, I don't think we support this use case at the moment, but it should be doable with a custom component. Feel free to create a PR to add an example to the docs, it would be much appreciated.

[alexfauquette]

Effectively, we don't support that for now.

I'm closing this issue because it's a duplicate of #13988

Feel free to comment the other issue if you think some part of your needs are not yet explained in it, and to upvote it with a 👍

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.