如何将渐变 css 添加到 Nivo Rocks 折线图区域？

Question

I tried adding gradient css to line chart area of nivo rocks component according to this guide Gradients . but it is not working.

Example screenshot

I need something like the above chart gradients. And here is my code,

    <ResponsiveLine
        data={data1}
        margin={{
            "top": 65,
            "right": 50,
            "bottom": 50,
            "left": 70
        }}
        yScale={{ type: 'linear', min: 0, max: 10 }}
        tooltip={tooltip}
        stacked={true}
        curve="monotoneX"
        axisTop={null}
        axisRight={null}
        axisBottom={{
            "tickSize": 5,
            "tickPadding": 5,
            "tickRotation": 0,
            "legend": "VIDEOS",
            "legendPosition": "middle",
            "legendOffset": 42
        }}
        axisLeft={{
            "tickSize": 5,
            "tickPadding": 5,
            "tickRotation": 0,
            "legend": "MARKS",
            "legendPosition": "middle",
            "legendOffset": -40
        }}
        defs={[{
            id: 'gradientC',
            type: 'linearGradient',
            colors: [
                { offset: 0, color: '#fff' },
                { offset: 100, color: '#000' },
            ],
        },]}
        fill={[
            { match: '*', id: 'gradientC' },
        ]}
        animate={true}
        enableGridY={false}
        colors={'linear-gradient(to bottom, #fff, #000)'}
        colorBy={'id'}
        lineWidth={6}
        dotSize={14}
        enableDots={false}
        dotColor="inherit:darker(0.3)"
        dotBorderWidth={2}
        dotBorderColor="#ffffff"
        enableDotLabel={true}
        dotLabel="y"
        dotLabelYOffset={-12}
        enableArea={true}
        areaOpacity={0.1}
        motionStiffness={90}
        motionDamping={15}
        legends={[]}
    />

This is what I got,

Thanks in advance.

Answer 1

Bit late to the party on this, but if you're still stuck:

Pretty hacky, but will work as a little work around for adding a gradient to Nivo line chart. Create an SVG def for the linear gradient and then reference it by url in the color array.

// these are just an example for the chart wrapper
const height = 300;
const width = 800;

const gradProps = {
  gradientUnits: 'userSpaceOnUse',
  x1: '0',
  y1: '0',
  x2: '0',
  y2: height
};


const Chart = () => (
  <div style={{ height, width }}>
    <svg>
      <defs>
        <linearGradient id="someGradientId" {...gradProps} >
          <stop offset="25%" stopColor="#ff0000" />
          <stop offset="100%" stopColor="rgba(255,255,255,0)" />
        </linearGradient>
      </defs>
    </svg>

    <ResponsiveLine
      data={chartData}
      colors={['url(#someGradientId)']}
      margin={{
        top: 2,
        bottom: 2
      }}
      dotSize={0}
      enableArea={true}
      enableGridX={false}
      enableGridY={false}
      curve={curve}
      axisBottom={{
        tickValues: []
      }}
    />
  </div>
);

Will also need to then overwrite the color value for stroke of the line via css , as the

[stroke="url(#someGradientId)"] {
  stroke: #ff0000;
}

Answer 2

If you put

enableArea = {true}

it will show the background. Also you can put

areaOpacity={0.1}

Example

<ResponsiveLine
        data={data}
        margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
        xScale={{ type: 'point' }}
        yScale={{ type: 'linear', min: 'auto', max: 'auto', stacked: true, reverse: false }}
        curve="catmullRom"
        axisTop={null}
        axisRight={null}
        enableGridX={props.enableGridX}
        enableGridY={props.enableGridY}
        axisBottom={{
            orient: 'bottom',
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
        }}
        axisLeft={{
            orient: 'left',
            tickSize: 5,
            tickPadding: 5,
            tickRotation: 0,
        }}
        pointSize={10}
        pointColor={{ from: 'color', modifiers: [] }}
        pointBorderWidth={2}
        pointBorderColor={{ from: 'serieColor' }}
        pointLabel="y"
        pointLabelYOffset={-12}
        areaOpacity={0.25}
        useMesh={true}
        keys={['commits']}
        transportation
        defs={[{

            id: 'gradientC',

            type: 'linearGradient',

            colors: [

                { offset: 0, color: '#e65a14' },

                { offset: 100, color: '#e65a14' },

            ],

        },]}

        fill={[

            { match: '*', id: 'gradientC' },

        ]}
        animate={true}

        colorBy={'id'}

        lineWidth={2}

        dotSize={14}

        enableDots={false}

        dotColor="inherit:darker(0.3)"

        dotBorderWidth={2}

        dotBorderColor="#e65a14"

        enableDotLabel={true}

        dotLabel="y"

        dotLabelYOffset={-12}

        enableArea={true}


        motionStiffness={90}

        motionDamping={15}

        legends={[
            {
                anchor: 'bottom-right',
                direction: 'column',
                justify: false,
                translateX: 100,
                translateY: 0,
                itemsSpacing: 0,
                itemDirection: 'left-to-right',
                itemWidth: 80,
                itemHeight: 20,
                itemOpacity: 0.75,
                symbolSize: 12,
                symbolShape: 'circle',
                symbolBorderColor: 'rgba(0, 0, 0, .5)',
                effects: [
                    {
                        on: 'hover',
                        style: {
                            itemBackground: 'rgba(0, 0, 0, .03)',
                            itemOpacity: 1
                        }
                    }
                ]
            }
        ]}
    />