Color Schemes

Built-in color palettes and the ColorSchemeType system used by all chart series.

Import

import { schemes } from 'reaviz';

ColorSchemeType

All colorScheme props across reaviz accept one of three forms:

type ColorSchemeType =
  | string              // Named scheme or single color
  | string[]            // Array of colors
  | (data, index, active?) => string;  // Function returning a color

Built-in Palettes

Reaviz Palettes

D3 Chromatic Palettes

All chroma.brewer schemes are available by name:

Sequential: Blues, Greens, Greys, Oranges, Purples, Reds, BuGn, BuPu, GnBu, OrRd, PuBu, PuBuGn, PuRd, RdPu, YlGn, YlGnBu, YlOrBr, YlOrRd

Diverging: BrBG, PiYG, PRGn, RdBu, RdGy, RdYlBu, RdYlGn, Spectral

Categorical: Accent, Dark2, Paired, Pastel1, Pastel2, Set1, Set2, Set3

Usage

Named Scheme (String)

<AreaSeries colorScheme="cybertron" />
<BarSeries colorScheme="Spectral" />
<HeatmapSeries colorScheme="OrRd" />

Single Color

<BarSeries colorScheme="rgb(45, 96, 232)" />
<BarSeries colorScheme={schemes.cybertron[0]} />

Color Array

<AreaSeries colorScheme={['#FF5722', '#2196F3', '#4CAF50']} />

Function-Based

// By index
<AreaSeries colorScheme={(_data, index) => index % 2 ? 'blue' : 'green'} />

// By data value
<ScatterPoint color={(d) => d.metadata?.severity > 5 ? 'red' : 'blue'} />

Accessing Palette Colors Directly

import { schemes } from 'reaviz';

// Use first color from cybertron
const primaryColor = schemes.cybertron[0]; // '#2d60e8'

// Use in legend
<DiscreteLegendEntry color={schemes.cybertron[0]} label="Series A" />
<DiscreteLegendEntry color={schemes.cybertron[1]} label="Series B" />

Notes

• 'cybertron' is the default color scheme for most chart series
• Named D3 palettes are resolved via chroma.brewer — case-sensitive names
• For heatmaps, pass a 2-element array for a continuous color range: ['#low', '#high']
• Function-based schemes receive (data, index, activeValues?) and return a CSS color string