[docs] Improve slots definitions for charts

[alexfauquette]

Fix #12268
Fix #10352

• First commit ass some slots definition for the tooltip and axis
• Second commit is the result of yarn proptypes & yarn docs:api
• Third commit is adding a section in tooltip to show how to use those slots

[mui-bot]

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

Updated pages:

• docs/data/charts/tooltip/tooltip.md

Generated by 🚫 dangerJS against 5d2cf1e

[kelseywarshawsky]

This is really helpful! Sorry I'm just a random person on the internet but you happened to push this right as I was trying to use slots for a pie chart.

I have a custom tooltip - wondering how I can make that tooltip have an arrow? I think I can figure it out somehow but I am not finding it well documented

[alexfauquette]

@kelseywarshawsky
It's not a Tooltip but a Popper (the naming is missleading 🙈) so the arrow does not exist in the default component.

What interest you is here: https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsTooltip/ChartsTooltip.tsx/#L143-L161

Basically if you use the slots.tooltip with a components that support same props as the MUI Tooltip (especially open, placement, anchorEl) then you can add your own arrow

For example

function MyCustomChartsTooltip({open, placement, anchorEl}) {
	return <Popper open={open} placement={placement} anchorEl={anchorEl}>
			<ArrowElement placement={placement} anchorEl={anchorEl} />
			{children}
</Popper>
}

[michelengelen]

LGTM