[charts][docs] Add docs for rounded symbol

[GuillaumeMeheut]

Fix #12538

Preview: https://deploy-preview-15324--material-ui-x.netlify.app/x/react-charts/legend/#rounded-symbol

[mui-bot]

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

Updated pages:

• docs/data/charts/legend/legend.md

Generated by 🚫 dangerJS against 52dce22

[codspeed-hq]

CodSpeed Performance Report

Merging #15324 will not alter performance

_{Comparing GuillaumeMeheut:add-docs-rounded-symbol (52dce22) with master (10cf25d)}

Summary

✅ 3 untouched benchmarks

[oliviertassinari]

I was worried that this wouldn't work on Safari https://developer.mozilla.org/en-US/docs/Web/CSS/ry#values

but this is wrong, fixing that in: mdn/browser-compat-data#24991.

[alexfauquette]

Suggested change

	### Rounded symbol
	To create a rounded symbol, use the `sx` prop to style the symbol class directly. Import `legendClasses.mark` to target the symbol, and set the `ry` property to control the symbol's corner radius.
	### Rounded symbol
	To create a rounded symbol, use the `legendClasses.mark` to apply CSS on marks.
	Notice that SVG `rect` uses `ry` property to control the symbol's corner radius instead of `border-radius`.

I propose to be more generic, because sx is not the only way we can pass CSS to the component

[GuillaumeMeheut]

Updated

[JCQuintas]

@michelengelen might be good to add an alternative way of cherrypicking if the PR was merged with the wrong tags 🙃

I would suggest some sort of behaviour using issue_comment:created maybe? Or also target pull_request_target:labelled, which would probably be easier to implement, because you dont need to parse the comment body 😆