Skip to content

Charts - Styling

This page groups topics about charts customistion.

Colors

Series color

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

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

Color palette

Charts come with built-in color palettes to automatically assign colors to series. If a particular series lacks a color prop, the chart will default to assigning a color based on the series' index.

You can set a custom color palette by using the prop colors on chart components (or <ChartContainer /> if you are using composition). This prop takes an array of colors, or callback whose input is the theme's mode ('dark' or 'light') and returns the array of colors.

Provided palettes

The library includes three palettes.

−10010−1.5−1.0−0.50.00.51.01.5series 1series 2series 3series 4series 5series 6series 7series 8series 9series 10series 11series 12series 13

Custom palettes

Those palettes can also be generated by using d3-scale-chromatic. Or any color manipulation library you like.

Here is an example of the d3 Categorical color palette.

−6−4−202468−101series 1series 2series 3series 4series 5series 6series 7series 8series 9series 10series 11series 12series 13

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 for 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.