[docs] Add Charts example collection page (DX-10)

[prakhargupta1]

Closes: #16587
Closes #DX-10

Preview: https://deploy-preview-18353--material-ui-x.netlify.app/x/react-charts/examples/

[mui-bot]

Deploy preview: https://deploy-preview-18353--material-ui-x.netlify.app/

Updated pages:

• docs/data/charts/examples/examples.md

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	0B(0.00%)
@mui/x-charts	0B(0.00%)	0B(0.00%)
@mui/x-charts-pro	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	0B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

Generated by 🚫 dangerJS against 2f9a34f

[codspeed-hq]

CodSpeed Performance Report

Merging #18353 will not alter performance

_{Comparing prakhargupta1:charts-demo (2f9a34f) with master (93406bb)}

Summary

✅ 10 untouched

[prakhargupta1]

@alelthomas For #16587 I started exploring charts demos in this PR. The idea was to have a page similar to Data Grid's Features page. So basically list all demos from the docs into a single page. Would you like to continue it from here? Today we discussed that we should replace current data with some real data.

[prakhargupta1]

• Other charts are not centrally aligned, can we fix them?

• The buttons in https://deploy-preview-18353--material-ui-x.netlify.app/x/react-charts/line-demo/#line-chart-with-live-data need to be fixed.

• I see that adding a box to the original demos fixed the layouts. Should we not follow the same for other charts? For instance, area chart demos are still not using the full width.

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@mui/x-data-grid	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-pro	0B(0.00%)	0B(0.00%)
@mui/x-data-grid-premium	0B(0.00%)	▼-1B(0.00%)
@mui/x-charts	🔺+12B(0.00%)	🔺+8B(+0.01%)
@mui/x-charts-pro	🔺+12B(0.00%)	🔺+9B(+0.01%)
@mui/x-date-pickers	0B(0.00%)	0B(0.00%)
@mui/x-date-pickers-pro	0B(0.00%)	🔺+1B(0.00%)
@mui/x-tree-view	0B(0.00%)	0B(0.00%)
@mui/x-tree-view-pro	0B(0.00%)	0B(0.00%)

Details of bundle changes

[alelthomas]

• I see that adding a box to the original demos fixed the layouts. Should we not follow the same for other charts? For instance, area chart demos are still not using the full width.

Ugh I'm not so sure I like that look though. I've been discussing this with Nora, and she agrees that removing the whitespace just makes them look more cluttered... I feel like giving them a little bit of space helps. Similar to https://tremor.so/charts

[prakhargupta1]

On my Macbook, the area chart looks like below, but on a larger screen it looks fine.

Similarly, the pie chart goes out of the box:

[prakhargupta1]

@alexfauquette Overall it looks good to me now. Do you mind taking a look?

[github-actions]

This pull request has conflicts, please resolve those before we can evaluate the pull request.