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.

Available color schemes

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

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"
/>