Charts - Styling

This page groups topics about charts customistion.

Colors

Series color

Series accept a property color which is the base color used to render its components.

<LineChart series={[{ ..., color: '#fdb462'}]} />

Color palette

To avoid having to color series one by one, charts have a default color cycle. If a series does not have a color, a default color will be applied according to the index of the series.

You can override this color cycle by using prop colors to charts components (or <ChartContainer /> if you are using composition). This prop takes an array of colors.

Such array of colors can be generated by using d3-scale-chromatic.

Here is the example of the d3 Categorical color palette.

Styling

Size

By default, charts adapt their sizing to fill their parent element. However, you can modify this behavior by providing height and/or width props.

Those will fix the chart's size to the given value (in px).

Placement

At the core of charts layout is the drawing area which corresponds to the space available to represent data.

This space can be fined with the margin prop and its properties top, bottom, left, and right. Those values define the space between the SVG border and the drawing area.

You might want to modify those values to let more space to your axis ticks, or reduce them to provide more space for the data.

CSS

Since the library relies on SVG for rendering, you can customize them as you do with other MUI components with CSS overriding.

Chart components accept the sx props. And you can target any sub elements with its class name.