Colors

The colors property

Beside highlighting data insights, your dataviz should be pretty, right?
nivo provides an easy way to deal with colors, very useful when using nested components.

various color ranges applied to nivo components.

Available color schemes

Almost all color schemes come from d3-scale-chromatic.

Categorical colors
nivo
category10
accent
dark2
paired
pastel1
pastel2
set1
set2
set3
tableau10
Diverging colors
brown_blueGreen
purpleRed_green
pink_yellowGreen
purple_orange
red_blue
red_grey
red_yellow_blue
red_yellow_green
spectral
Sequential colors
blues
greens
greys
oranges
purples
reds
blue_green
blue_purple
green_blue
orange_red
purple_blue_green
purple_blue
purple_red
red_purple
yellow_green_blue
yellow_green
yellow_orange_brown
yellow_orange_red

Single color property

The main colors property defines the main colors to use for your charts for main elements, for example the bars of a Bar chart or the rectangles of a TreeMap.

For other elements such as borders, links (for Pie radial labels for example), dots… you'll often have a dedicated color property such as borderColor or linkColor.

Those are peripheral elements and sometimes to have a coherent style you might want to use a color derived from the main element they're bound to (rect —> border), or from the main theme.

So those properties support several strategies:

Inheriting from parent element color

The following example will use the nivo color scheme to determine main element's color and then use this color for the border of those elements.

<Chart
colors={{ scheme: 'nivo' }}
borderColor={{ from: 'color' }}
/>

However it's not that useful as increasing the elements size would visually give the same result. That's where modifiers come into play, you can inherit from the main color but apply modifiers to dissociate it from the main element while keeping consistency.

The folowing code will inherit use the color from parent element and darken it by an amount of .6 and change its opacity to .5:

<Chart
colors={{ scheme: 'nivo' }}
borderColor={{
from: 'color',
modifiers: [
['darker', .6],
['opacity', .5]
]
}}
/>

Available modifiers are darker, brighter and opacity.

Using a color from current theme

If you want to use a fixed color but want it to match current theme, you can use the following config:

<Chart
colors={{ scheme: 'nivo' }}
borderColor={{ theme: 'background' }}
/>

Now all borders will use the background property from current theme.

Using a static custom color

Using a custom color is pretty straightforward:

<Chart
colors={{ scheme: 'nivo' }}
borderColor="#000000"
/>