Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 69 additions & 0 deletions docs/data/charts/styling/BackgroundStyling.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import { LinePlot } from '@mui/x-charts/LineChart';

import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
import { useDrawingArea } from '@mui/x-charts/hooks';
import {
dateAxisFormatter,
percentageFormatter,
usUnemploymentRate,
} from '../dataset/usUnemploymentRate';

function Background() {
const drawingArea = useDrawingArea();
const theme = useTheme();
return (
<rect
x={drawingArea.left}
y={drawingArea.top}
width={drawingArea.width}
height={drawingArea.height}
fill={theme.palette.mode === 'light' ? '#f5f5f5' : '#303030'}
/>
);
}

export default function BackgroundStyling() {
return (
<ChartContainer
dataset={usUnemploymentRate}
xAxis={xAxis}
yAxis={yAxis}
series={series}
height={300}
>
<Background />
<ChartsGrid vertical horizontal />
<LinePlot />
<ChartsXAxis />
<ChartsYAxis />
</ChartContainer>
);
}

const xAxis = [
{
dataKey: 'date',
scaleType: 'time',
valueFormatter: dateAxisFormatter,
},
];

const yAxis = [
{
valueFormatter: percentageFormatter,
},
];

const series = [
{
type: 'line',
dataKey: 'rate',
showMark: false,
valueFormatter: percentageFormatter,
},
];
67 changes: 67 additions & 0 deletions docs/data/charts/styling/BackgroundStyling.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import * as React from 'react';
import { useTheme } from '@mui/material/styles';
import { LinePlot } from '@mui/x-charts/LineChart';
import { XAxis } from '@mui/x-charts/models';
import { ChartContainer } from '@mui/x-charts/ChartContainer';
import { ChartsXAxis } from '@mui/x-charts/ChartsXAxis';
import { ChartsYAxis } from '@mui/x-charts/ChartsYAxis';
import { ChartsGrid } from '@mui/x-charts/ChartsGrid';
import { useDrawingArea } from '@mui/x-charts/hooks';
import {
dateAxisFormatter,
percentageFormatter,
usUnemploymentRate,
} from '../dataset/usUnemploymentRate';

function Background() {
const drawingArea = useDrawingArea();
const theme = useTheme();
return (
<rect
x={drawingArea.left}
y={drawingArea.top}
width={drawingArea.width}
height={drawingArea.height}
fill={theme.palette.mode === 'light' ? '#f5f5f5' : '#303030'}
/>
);
}

export default function BackgroundStyling() {
return (
<ChartContainer
dataset={usUnemploymentRate}
xAxis={xAxis}
yAxis={yAxis}
series={series}
height={300}
>
<Background />
<ChartsGrid vertical horizontal />
<LinePlot />
<ChartsXAxis />
<ChartsYAxis />
</ChartContainer>
);
}

const xAxis: XAxis<'time'>[] = [
{
dataKey: 'date',
scaleType: 'time',
valueFormatter: dateAxisFormatter,
},
];
const yAxis = [
{
valueFormatter: percentageFormatter,
},
];
const series = [
{
type: 'line' as const,
dataKey: 'rate',
showMark: false,
valueFormatter: percentageFormatter,
},
];
13 changes: 13 additions & 0 deletions docs/data/charts/styling/BackgroundStyling.tsx.preview
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<ChartContainer
dataset={usUnemploymentRate}
xAxis={xAxis}
yAxis={yAxis}
series={series}
height={300}
>
<Background />
<ChartsGrid vertical horizontal />
<LinePlot />
<ChartsXAxis />
<ChartsYAxis />
</ChartContainer>
9 changes: 9 additions & 0 deletions docs/data/charts/styling/styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,15 @@ From here, you can target any subcomponents with its class name.

{{"demo": "SxStyling.js"}}

### Drawing area background

To set a background color in the drawing area, you should create a dedicated `<rect />`.
This is only doable with [composition](/x/react-charts/composition/) because you have to place this new component before all plot components.

The following demo defines a basic `<Background />` component that adds a light gray background.

{{"demo": "BackgroundStyling.js"}}

### Gradients and patterns

It is possible to use gradients and patterns to fill the charts.
Expand Down
Loading