Charts - Styling

This page groups topics about charts customistion.

Colors

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

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

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.