How to add gradient css to Nivo Rocks Line chart area?

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;
}