[charts][docs] Fix Population pyramid demo

[oliviertassinari]

A continuation of #17652 and #17980. https://mui.com/x/react-charts/bar-demo/#population-pyramid has a number of problems:

1. I have never seen an age pyramid rendered in this order. This is the "right" way IMHO: https://en.wikipedia.org/wiki/Population_pyramid.
2. It's hard to read on mobile:

3. We render a h6 in the page, orphan from the other headers.

Preview: https://deploy-preview-17987--material-ui-x.netlify.app/x/react-charts/bar-demo/#population-pyramid

---

Off-topics: I don't understand this:

mui-x/packages/x-charts/src/constants/index.ts

Lines 5 to 10 in ecc9177

	export const DEFAULT_MARGINS = {
	top: 20,
	bottom: 20,
	left: 20,
	right: 20,
	};

I thought we would get 0 for all those values. I had to set margin={{ right: 0, left: 0 }} and then use CSS to set the margin that I wanted, with responsive values. Proposing this for the next major: #17988.

[github-actions]

Thanks for adding a type label to the PR! 👍

[mui-bot]

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

Bundle size report

Total Size Change: 0B^(0.00%) - Total Gzip Change: 0B^(0.00%)
Files: 118 total (0 added, 0 removed, 0 changed)

Details of bundle changes

Generated by 🚫 dangerJS against b756b3d

[codspeed-hq]

CodSpeed Performance Report

Merging #17987 will not alter performance

_{Comparing oliviertassinari:fix-pyramid (b756b3d) with master (ea53ddc)}

Summary

✅ 9 untouched benchmarks

[bernardobelchior]

Good improvements, thank you 💪

[prakhargupta1]

My two cents:
Maybe it should be called Horizontal diverging bar chart, like: https://nivo.rocks/storybook/?path=/story/bar--diverging-grouped

[bernardobelchior]

Maybe it should be called Horizontal diverging bar chart

That feels like the technical name, but I suspect users will search for "Population pyramid" instead. I didn't even know this was called "horizontal diverging bar chart", so I think users won't either.

[oliviertassinari]

For the diverging bar chart, it feels like the pyramid charts is a too simple version of it. Looking at https://www.datylon.com/resources/chart-library/diverging-bar-chart, we might want something equivalent.

Now, I'm surprised that I can't find a demo of this in https://echarts.apache.org/examples/en/index.html#chart-type-bar or https://www.highcharts.com/demo#highcharts-demo-column-and-bar-charts.
But in here, it's called stacked horizontal: https://www.ag-grid.com/charts/gallery/stacked-horizontal-bar/.

In https://www.highcharts.com/demo/highcharts/bar-negative-stack, they give this a simpler name, so for #16587 we would likely need to invest into the search experience.

[prakhargupta1]

In https://www.highcharts.com/demo/highcharts/bar-negative-stack, they give this a simpler name

Agree, Bar with negative values seems like a simpler name. Another example: https://apexcharts.com/javascript-chart-demos/bar-charts/bar-with-negative-values/

[alexfauquette]

I did a few update:

• I've replaced the default x-axis extremums by one that rounds at 100k population, and made sure the x-axis is symmetric. This is more realistic, plus it same some space on mobile
• Added vertical grid for the ease of reading
• I fixed the formatting that was not the same on male/female values in the tooltip.

Agree, Bar with negative values seems like a simpler name

I would prefer to keep the "Population pyramid" name since it's the official name of this chart.

We already have something named positiveandnegativebarchart taken from this Rechart example

We could add an extra demo similar to the diverging example you shared. If you agree we can add it in #17980