Gradient for Line component (or Stream) about nivo HOT 10 CLOSED

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

<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' },
      ]}
/>