Patterns

Purpose

Using patterns can be useful to group similar items, for example imagine you want to build a pie chart displaying various foods, you can use a color scale to assign a unique color to each one, then you can group vegetables/fruits/meats/… using a similar pattern for each group (while keeping color variation).

Using patterns in nivo

Defining patterns in nivo is a 2 steps process, first you'll have to declare available definitions (the same goes for gradients) using dedicated helpers or providing plain objects.
Then you must define the rules to apply those definitions using the fill property.

patterns applied to various nivo components.

Separating pattern definitions from application allows us to reuse those in various places, like fills and borders, and while maintaining a direct mapping for a bar chart with 5 items can be simple enough, when you're dealing with a complex heatmap with tens of nodes it can quickly become cumbersome. Doing so also provides the ability to use a pattern depending on chart element value. Last but not least, patterns colors can be inherited from current node ones.

Example

import { patternDotsDef, patternSquaresDef } from '@nivo/core'
import { Stream } from '@nivo/stream'
const MyChart = () => (
<Stream
data={/*…*/}
keys={['react', 'vue', 'elm']}
// 1. defining patterns
defs={[
// using helpers (cannot be used with http rendering API)
// will use color from current element
patternDotsDef('dots', { color: 'inherit' }),
// will use background color from current element
patternSquaresDef('squares', { background: 'inherit' }),
// using plain object
{ id: 'custom', type: 'patternSquares', size: 24 },
]}
// 2. defining rules to apply those patterns
fill={[
// match using query object
// (can be used with http rendering API
{ match: { id: 'react' }, id: 'dots' },
// match using function
// (cannot be used with http rendering API
{ match: d => d.id === 'vue', id: 'squares' },
// match all, will only affect 'elm' because once
// a rule match, others are skipped
// (can be used with http rendering API
{ match: '*', id: 'custom' },
]}
/>
)

Available patterns

Dots

numberoptionaldefault:4
px

dots size.

numberoptionaldefault:4
px

padding between dots.

booleanoptionaldefault:false
   

staggered dots.

stringoptionaldefault:'#ffffff'
   #ffffff

pattern background color.

stringoptionaldefault:'#000000'
   #000000

dots color.

// helper
patternDotsDef('dots-pattern', {
"size": 4,
"padding": 4,
"stagger": false,
"background": "#ffffff",
"color": "#000000"
})
// plain object
{
"id": "dots-pattern",
"type": "patternDots",
"size": 4,
"padding": 4,
"stagger": false,
"background": "#ffffff",
"color": "#000000"
}

Lines

numberoptionaldefault:5

spacing between lines.

numberoptionaldefault:0
°

lines rotation.

numberoptionaldefault:2
px

lines thickness.

stringoptionaldefault:'#ffffff'
   #ffffff

pattern background color.

stringoptionaldefault:'#000000'
   #000000

lines color.

// helper
patternLinesDef('lines-pattern', {
"spacing": 5,
"rotation": 0,
"lineWidth": 2,
"background": "#ffffff",
"color": "#000000"
})
// plain object
{
"id": "lines-pattern",
"type": "patternLines",
"spacing": 5,
"rotation": 0,
"lineWidth": 2,
"background": "#ffffff",
"color": "#000000"
}

Squares

numberoptionaldefault:4
px

squares size.

numberoptionaldefault:4
px

padding between squares.

booleanoptionaldefault:false
   

staggered squares.

stringoptionaldefault:'#ffffff'
   #ffffff

pattern background color.

stringoptionaldefault:'#000000'
   #000000

squares color.

// helper
patternSquaresDef('squares-pattern', {
"size": 4,
"padding": 4,
"stagger": false,
"background": "#ffffff",
"color": "#000000"
})
// plain object
{
"id": "squares-pattern",
"type": "patternSquares",
"size": 4,
"padding": 4,
"stagger": false,
"background": "#ffffff",
"color": "#000000"
}

Known limitations

Please be aware that pattern usage has some limitations, it's not supported for canvas chart implementations for now, and tooltips involving colored chips will use plain element color.