[charts][docs] Add shiny bar chart example at the top

[JCQuintas]

Some improvements can be made by using inline legend, from PR

[mui-bot]

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

Updated pages:

• docs/data/charts/bars/bars.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 33b8fee

[codspeed-hq]

CodSpeed Performance Report

Merging #19416 will not alter performance

_{Comparing JCQuintas:bar-chart-shiny (33b8fee) with master (3148ff0)¹}

Summary

✅ 10 untouched

Footnotes

1. No successful run was found on master (480d03f) during the generation of this report, so 3148ff0 was used instead as the comparison base. There might be some changes unrelated to this pull request in this report. ↩

[alexfauquette]

I've added a commit to extract the data set and removed some sx that apparently do nothing.

The only issue with this demo is the mobile view. We should probably move the legend at the bottom in the case. But it' looks triky. Will be easier with #19382

[JCQuintas]

I've added a commit to extract the data set and removed some sx that apparently do nothing.

The only issue with this demo is the mobile view. We should probably move the legend at the bottom in the case. But it' looks triky. Will be easier with #19382

fixed now

[prakhargupta1]

The example looks great, we were missing horizontal bar chart demos. About it's placement, is there any reason to put it at the top in the Bars Overview page? I think we should move it to the Demos page.