[charts] Create Demo page

[oliviertassinari]

Summary

This issue proposes the creation of a "Demo" page for the charts. "Demo" in the sense used in #16586.

In practice, it feels like having something like:

• https://recharts.org/en-US/examples
• https://echarts.apache.org/examples/en/index.html
• https://www.highcharts.com/demo

would be amazing.

https://www.chartjs.org/ doesn't have this, and it feels like they are truly missing out. It seems to have been a popular request in chartjs/Chart.js#2366, and in IMHO, the solution they came up with (chartjs/Chart.js#4043) missed the whole point of the problem.

Now, I still have a major complaint about the examples I shared just above: those demos are completely disconnected from the rest of the docs. When I was using recharts's docs, I really hated it, I was effectively picking the demo the closest to my use case, and then reverse engineering that demo. I felt like a monkey coder.

Instead, it feels like a great solution for us is to:

1. Create a https://mui.com/x/react-charts/demo/ page (like we have for https://mui.com/x/react-data-grid/demo/)
2. Have the content visually organized like https://echarts.apache.org/examples/en/index.html (great execution there).
3. The actual demos used for the demo page has to be mostly cherry-picked demos from the existing docs. If there is a need for a new demo for the demo page, then we first try hard to add it to fill a gap in the docs. I suspected that it's possible for 100% of the demos. But maybe with a 90% hard limit, it's good enough?
4. When you click on one of the examples to expand it, you are moved to the docs, where that demo is shown.

For comparison:

• https://ui.shadcn.com/charts is good, but it's missing a hierarchy to orient oneself. They need to make the chart type picker position sticky. Only 3 demos per row on my laptop screen? It should be more dense.
• https://www.highcharts.com/demo shows a nested navigation in the sidenav. I felt so lost using it, I hated it.
• https://recharts.org/en-US/examples is way too crowded. I want to be able to visually scan the options.
• https://plotly.com/javascript/ this is pretty cheap.

Search keywords: -

[JCQuintas]

@oliviertassinari the https://echarts.apache.org/examples/en/index.html page is quite visual, I quite like it as well. I think https://airbnb.io/visx/gallery does it quite well too.

How would you handle a "demo" page for all charts types? Wouldn't we need to have a different sidebar somehow?

Have all the content be demos from the existing docs.

Not sure all, as some are quite similar, but most would be good

When you click on one of the examples to expand it, you are moved to the docs, where that demo is shown.

That would be amazing to have

[oliviertassinari]

Not sure all, as some are quite similar, but most would be good

Ah right, ok, I wasn't clear enough. I have updated the issue description to clarity the idea.