[charts] Decouple margin and axis-size

[JCQuintas]

Testing of #16383 (comment)

[mui-bot]

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

Generated by 🚫 dangerJS against 86b3461

[codspeed-hq]

CodSpeed Performance Report

Merging #16418 will degrade performances by 59.84%

_{Comparing JCQuintas:axis-size-poc (12e239f) with master (a592f92)}

Summary

❌ 6 regressions

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Benchmarks breakdown

	Benchmark	BASE	HEAD	Change
❌	BarChart with big data amount	546.2 ms	1,236.7 ms	-55.83%
❌	BarChartPro with big data amount	818.1 ms	1,832.4 ms	-55.35%
❌	LineChart with big data amount	317.6 ms	790.9 ms	-59.84%
❌	LineChartPro with big data amount	136.5 ms	289.4 ms	-52.82%
❌	ScatterChart with big data amount	390.9 ms	641.8 ms	-39.1%
❌	ScatterChartPro with big data amount	52.9 ms	84.2 ms	-37.2%

[JCQuintas]

@alexfauquette having the config in either the plugin or in the component cause a re-render which slows up the chart.

An alternative could be to get rid of left/right/top/bottomAxis properties, move all the config into the x/yAxis, which will then process everything before they render as far as I'm aware. 🤔

eg:

<LineChart
  xAxis={[
    {
      data: ['A', 'B', 'C', 'D'],
      scaleType: 'point',
      position: 'right',
    },
  ]}
  series={[{ data: [40, 30, 20, 10] }]}
  height={200}
/>