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
• https://www.ag-grid.com/charts/gallery/

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.

When it comes to creating more demos, we have #17980.

Search keywords: -