Nivo: Gradient for Line component (or Stream)

[Kerumen]

Is it possible to fill the area below the line with a gradient?

Example: http://recharts.org/#/en-US/api/AreaChart

[plouc]

For now it's not, charts use colors range for the sake of simple use.

[plouc]

Started something for the gradient support => http://nivo.rocks/#/guides/gradients, but it's not available for line chart for now, just on Stream.

[plouc]

Area support has been added to line chart https://github.com/plouc/nivo/pull/82

[dielduarte]

hey @plouc, any news related to linear gradients in an area?

[Eric0201]

with pie chart ? @plouc

[pnikitinsky]

up

[arualana]

Hi, the gradient on line chart area is not working

<Line
        data={data}
        width={700}
        height={310}            
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', stacked: false, min: 0, max: 400 }}
        curve="linear"
        axisTop={null}
        axisRight={null}
        axisBottom={null}
        axisLeft={null}
        enableGridX={false}
        enableGridY={false}
        colors={d => d.color}
        enablePoints={false}           
        enableSlices="x"            
        enableArea={true}
        areaBlendMode="screen"
        areaOpacity={0.16}
        keys={['react', 'vue', 'elm']}
        defs={[{
          id: 'gradientC',
          type: 'linearGradient',
          colors: [
            { offset: 0, color: '#fff' },
            { offset: 100, color: '#000' },
          ],
        },]}
        fill={[
          { match: '*', id: 'gradientC' },
        ]}
        useMesh={true}
/>

Above is my code, the gradient is not being rendered whatsoever.

I also tried the example in the docs, and still no gradient shows

<Line
        data={data}
        width={700}
        height={310}
        margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', stacked: false, min: 0, max: 400 }}
        curve="linear"
        axisTop={null}
        axisRight={null}
        axisBottom={null}
        axisLeft={null}
        enableGridX={false}
        enableGridY={false}
        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' },
          ]),
          // 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' },
      ]}
/>

[tomaswitek]

There is an opened PR which seems to solve this issue.

[stale[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!