[charts] Improve `sx` documentation

[alexfauquette]

Feedback received: Chart components accept the sx props. From here, you can target any subcomponents with its class name. how?

from https://mui.com/x/react-charts/styling/#

Search keywords:

[derek-0000]

Wondered If I can get this assigned? I started working on an example and wanted to know:

• How many examples may it be enough to demonstrate the usage of sx for styling?

I kinda feel that one may be enough. But wanted to make sure.

Current wip:

import * as React from 'react';
import { BarChart } from '@mui/x-charts/BarChart';

export default function SxStylingTemplate() {
  return (
    <BarChart
      sx={{
        border: '1px solid rgba(255, 255, 255, 0.1)',
        backgroundImage:
          'linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px)',
        backgroundSize: '35px 35px',
        backgroundPosition: '20px 20px, 20px 20px',
        '& .MuiBarElement-root': {
          fill: '#000000',
          stroke: '#00DD43',
          strokeWidth: 2,
        },
        '& .MuiChartsAxis-root .MuiChartsAxis-line': {
          stroke: '#FFDD43',
        },
        '& .MuiChartsAxis-directionY > *:nth-child(2)': {
          stroke: 'red',
        },
        '& .MuiChartsAxis-directionY > *:nth-child(3)': {
          stroke: 'yellow',
        },
        '& .MuiChartsAxis-directionY > *:nth-child(4)': {
          stroke: 'yellow',
        },
        '& .MuiChartsAxis-directionY > *:nth-child(5)': {
          stroke: 'green',
        },
      }}
      xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
      series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
      width={500}
      height={300}
    />
  );
}

[alexfauquette]

Yes, one demo might be enough

If you want to do it, consider using the class objects to generate the selectors. For example [`.${axisClasses.left} .${axisClasses.label}`] like in this example: https://mui.com/x/react-charts/axis/#fixing-overflow-issues

I might rework some demo to use them instead of the hardcoded string such that ".MuiLineElement-root"

[derek-0000]

Sure thing!

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@alexfauquette: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.