From eff163507662d986107b222c176ba9e0fc89e6d0 Mon Sep 17 00:00:00 2001 From: Derek Date: Mon, 15 Apr 2024 10:46:56 -0600 Subject: [PATCH 1/3] Updated docs to include example of chart styling with sx props --- docs/data/charts/styling/SxStylingTemplate.js | 53 +++++++++++++++++++ docs/data/charts/styling/styling.md | 2 + 2 files changed, 55 insertions(+) create mode 100644 docs/data/charts/styling/SxStylingTemplate.js diff --git a/docs/data/charts/styling/SxStylingTemplate.js b/docs/data/charts/styling/SxStylingTemplate.js new file mode 100644 index 0000000000000..d595fc90dcd82 --- /dev/null +++ b/docs/data/charts/styling/SxStylingTemplate.js @@ -0,0 +1,53 @@ +import * as React from 'react'; +import { BarChart } from '@mui/x-charts/BarChart'; +import { axisClasses } from '@mui/x-charts/ChartsAxis'; +import { barElementClasses } from '@mui/x-charts/BarChart'; + +const labels = ['Group A', 'Group B', 'Group C', 'Group D', 'Group E']; +const lData = [42, 24, 56, 45, 3]; +const rData = [57, 7, 19, 16, 22]; +const colors = ['#006BD6', '#EC407A']; + +export default function SxStylingTemplate() { + return ( + + ); +} diff --git a/docs/data/charts/styling/styling.md b/docs/data/charts/styling/styling.md index 1892ccce2dcee..c88dc5d84f60a 100644 --- a/docs/data/charts/styling/styling.md +++ b/docs/data/charts/styling/styling.md @@ -68,3 +68,5 @@ Since the library relies on SVG for rendering, you can customize them as you do Chart components accept the `sx` props. From here, you can target any subcomponents with its class name. + +{{"demo": "SxStylingTemplate.js"}} From 5014ec7c05a5c595f58679c75764a8a40ed4a875 Mon Sep 17 00:00:00 2001 From: Derek Date: Mon, 15 Apr 2024 12:45:40 -0600 Subject: [PATCH 2/3] Added typescript demo --- .../{SxStylingTemplate.js => SxStyling.js} | 5 +- docs/data/charts/styling/SxStyling.tsx | 52 +++++++++++++++++++ docs/data/charts/styling/styling.md | 2 +- 3 files changed, 55 insertions(+), 4 deletions(-) rename docs/data/charts/styling/{SxStylingTemplate.js => SxStyling.js} (90%) create mode 100644 docs/data/charts/styling/SxStyling.tsx diff --git a/docs/data/charts/styling/SxStylingTemplate.js b/docs/data/charts/styling/SxStyling.js similarity index 90% rename from docs/data/charts/styling/SxStylingTemplate.js rename to docs/data/charts/styling/SxStyling.js index d595fc90dcd82..f871908ac436a 100644 --- a/docs/data/charts/styling/SxStylingTemplate.js +++ b/docs/data/charts/styling/SxStyling.js @@ -1,14 +1,13 @@ import * as React from 'react'; -import { BarChart } from '@mui/x-charts/BarChart'; +import { BarChart, barElementClasses } from '@mui/x-charts/BarChart'; import { axisClasses } from '@mui/x-charts/ChartsAxis'; -import { barElementClasses } from '@mui/x-charts/BarChart'; const labels = ['Group A', 'Group B', 'Group C', 'Group D', 'Group E']; const lData = [42, 24, 56, 45, 3]; const rData = [57, 7, 19, 16, 22]; const colors = ['#006BD6', '#EC407A']; -export default function SxStylingTemplate() { +export default function SxStyling() { return ( + ); +} diff --git a/docs/data/charts/styling/styling.md b/docs/data/charts/styling/styling.md index c88dc5d84f60a..f585c5ed8db41 100644 --- a/docs/data/charts/styling/styling.md +++ b/docs/data/charts/styling/styling.md @@ -69,4 +69,4 @@ Since the library relies on SVG for rendering, you can customize them as you do Chart components accept the `sx` props. From here, you can target any subcomponents with its class name. -{{"demo": "SxStylingTemplate.js"}} +{{"demo": "SxStyling.js"}} From 81fb99e64d569a3b4b418827e99b0e903c62c564 Mon Sep 17 00:00:00 2001 From: alexandre Date: Fri, 19 Apr 2024 11:53:23 +0200 Subject: [PATCH 3/3] support light theme --- docs/data/charts/styling/SxStyling.js | 34 +++++++++++-------------- docs/data/charts/styling/SxStyling.tsx | 35 ++++++++++++-------------- 2 files changed, 31 insertions(+), 38 deletions(-) diff --git a/docs/data/charts/styling/SxStyling.js b/docs/data/charts/styling/SxStyling.js index f871908ac436a..158f933f9ff06 100644 --- a/docs/data/charts/styling/SxStyling.js +++ b/docs/data/charts/styling/SxStyling.js @@ -10,39 +10,35 @@ const colors = ['#006BD6', '#EC407A']; export default function SxStyling() { return ( ({ [`.${barElementClasses.root}`]: { - fill: '#0D0D0D', - stroke: colors[1], + fill: theme.palette.background.paper, strokeWidth: 2, }, - [`.${barElementClasses.root}:nth-child(-n+${lData.length})`]: { + [`.MuiBarElement-series-l_id`]: { stroke: colors[0], }, + [`.MuiBarElement-series-r_id`]: { + stroke: colors[1], + }, [`.${axisClasses.root}`]: { - [`.${axisClasses.tick}`]: { + [`.${axisClasses.tick}, .${axisClasses.line}`]: { stroke: '#006BD6', + strokeWidth: 3, }, - [`.${axisClasses.line}`]: { - stroke: '#006BD6', + [`.${axisClasses.tickLabel}`]: { + fill: '#006BD6', }, }, - [`.${axisClasses.bottom} .${axisClasses.tickContainer}`]: { - stroke: '#006BD6', - }, - [`.${axisClasses.left} .${axisClasses.tickContainer}`]: { - stroke: '#006BD6', - }, - 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)', + border: `1px solid rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1)`, + backgroundImage: `linear-gradient(rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px)`, backgroundSize: '35px 35px', backgroundPosition: '20px 20px, 20px 20px', - }} + })} xAxis={[{ scaleType: 'band', data: labels }]} series={[ - { data: lData, label: 'l', id: 'lId' }, - { data: rData, label: 'r', id: 'rId' }, + { data: lData, label: 'l', id: 'l_id' }, + { data: rData, label: 'r', id: 'r_id' }, ]} colors={colors} width={500} diff --git a/docs/data/charts/styling/SxStyling.tsx b/docs/data/charts/styling/SxStyling.tsx index d045a92a56b82..57758d5ab7b94 100644 --- a/docs/data/charts/styling/SxStyling.tsx +++ b/docs/data/charts/styling/SxStyling.tsx @@ -10,39 +10,36 @@ const colors: string[] = ['#006BD6', '#EC407A']; export default function SxStyling(): React.JSX.Element { return ( ({ [`.${barElementClasses.root}`]: { - fill: '#0D0D0D', - stroke: colors[1], + fill: theme.palette.background.paper, strokeWidth: 2, }, - [`.${barElementClasses.root}:nth-child(-n+${lData.length})`]: { + [`.MuiBarElement-series-l_id`]: { stroke: colors[0], }, + [`.MuiBarElement-series-r_id`]: { + stroke: colors[1], + }, [`.${axisClasses.root}`]: { - [`.${axisClasses.tick}`]: { + [`.${axisClasses.tick}, .${axisClasses.line}`]: { stroke: '#006BD6', + strokeWidth: 3, }, - [`.${axisClasses.line}`]: { - stroke: '#006BD6', + [`.${axisClasses.tickLabel}`]: { + fill: '#006BD6', }, }, - [`.${axisClasses.bottom} .${axisClasses.tickContainer}`]: { - stroke: '#006BD6', - }, - [`.${axisClasses.left} .${axisClasses.tickContainer}`]: { - stroke: '#006BD6', - }, - 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)', + + border: `1px solid rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1)`, + backgroundImage: `linear-gradient(rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(${theme.palette.mode === 'dark' ? '255,255,255' : '0, 0, 0'}, 0.1) 1px, transparent 1px)`, backgroundSize: '35px 35px', backgroundPosition: '20px 20px, 20px 20px', - }} + })} xAxis={[{ scaleType: 'band', data: labels }]} series={[ - { data: lData, label: 'l', id: 'lId' }, - { data: rData, label: 'r', id: 'rId' }, + { data: lData, label: 'l', id: 'l_id' }, + { data: rData, label: 'r', id: 'r_id' }, ]} colors={colors} width={500}