Steps to reproduce

Create a very basic composition for the PiePlot

<ChartDataProvider
        series={[
          {
            type: 'pie',
            id: "some-id",
            data: [
              { value: 0.64, label: 'Google Chrome' },
              { value: 0.19, label: 'Apple Safari' },
              { value: 0.5, label: 'Microsoft Edge' },
              { value: 3, label: 'Mozilla Firefox' },
              { value: 2, label: 'Opera' },
              { value: 1, label: 'Internet Explorer' },
              { value: 2, label: 'Samsung Internet' },
              { value: 4, label: 'Other' },
            ],
          },
        ]}
        height={300}
        width={300}
        margin={{ left: 0, top: 0, right: 0, bottom: 0 }}
      >
        <ChartsSurface>
          <PiePlot />
        </ChartsSurface>
      </ChartDataProvider>

Current behavior

the rendered by chart is not centered inside the svg:

Instead it's move to the top right

Expected behavior

• The rendered chart should be centered.
• Don't throw a TS error when changing plugins prop on ChartDataProvider (Source has 2 element(s) but target requires 6)
• Improved documentation about chart compositions with examples for different kinds of chart plots
• Improved documentation about chart composition in general as it feels very highlevel for the complexity that it opens up

Context

I tried to follow the code as far as possible:

The cause is, that the calculated values for transform (https://github.com/mui/mui-x/blob/master/packages/x-charts/src/PieChart/PiePlot.tsx#L82) are not correct.

The reason for that seems to be that axisSizeLeft (https://github.com/mui/mui-x/blob/master/packages/x-charts/src/internals/plugins/corePlugins/useChartDimensions/useChartDimensions.selectors.ts#L58) is 45 and not 0.

That again seems to be caused by the internal useChartCartesianAxis (https://github.com/mui/mui-x/blob/master/packages/x-charts/src/internals/plugins/featurePlugins/useChartCartesianAxis/useChartCartesianAxis.ts) but I don't really understand yet how all the calculations happen.

The issue can be solved by overwriting plugins prop on ChartDataProvider with PIE_CHART_PLUGINS like it's done in PieChart (https://github.com/mui/mui-x/blob/master/packages/x-charts/src/PieChart/PieChart.tsx#L134) but that throws typescript errors. (Source has 2 element(s) but target requires 6)
Solution came from: https://github.com/mui/mui-x/blob/master/packages/x-charts/src/context/ChartProvider/ChartProvider.tsx#L28-L29

Your environment

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: PiePlot, ChartDataProvider