Gradients

While gradients rarely add meaning to your data, it's an easy way to enhance the look of your charts.

Using gradients in nivo

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

Separating gradient 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 gradient depending on chart element value. Last but not least, gradient colors can be inherited from current node ones.

Example

import { linearGradientDef } from '@nivo/core'
import { Stream } from '@nivo/stream'

const MyChart = () => (
    <Stream
        data={[/*…*/]}
        keys={['react', 'vue', 'elm']}
        // 1. defining gradients
        defs={[
            // using helpers
            // will inherit colors from current element
            linearGradientDef('gradientA', [
                { offset: 0, color: 'inherit' },
                { offset: 100, color: 'inherit', opacity: 0 },
            ]),
            linearGradientDef('gradientB', [
                { offset: 0, color: '#000' },
                { offset: 100, color: 'inherit' },
            ],
            // you may specify transforms for your gradients, e.g. rotations and skews,
            // following the transform attribute format.
            // For instance here we rotate 90 degrees relative to the center of the object.
            {
                gradientTransform: 'rotate(90 0.5 0.5)'
            }),
            // using plain object
            {
                id: 'gradientC',
                type: 'linearGradient',
                colors: [
                    { offset: 0, color: '#faf047' },
                    { offset: 100, color: '#e4b400' },
                ],
            },
        ]}
        // 2. defining rules to apply those gradients
        fill={[
            // match using object query
            { match: { id: 'react' }, id: 'gradientA' },
            // match using function
            { match: d => d.id === 'vue', id: 'gradientB' },
            // match all, will only affect 'elm', because once a rule match,
            // others are skipped, so now it acts as a fallback
            { match: '*', id: 'gradientC' },
        ]}
    />
)

Known limitations

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