src/charts/sparkline.js
function createGradients() {
            let metadataGroup = svg.select('.metadata-group');

            if (areaGradientEl || lineGradientEl) {
                svg.selectAll(`#${areaGradientId}`).remove();
                svg.selectAll(`#${lineGradientId}`).remove();
            }

            areaGradientEl = metadataGroup.append('linearGradient')
                .attr('id', areaGradientId)
                .attr('class', 'area-gradient')
                .attr('gradientUnits', 'userSpaceOnUse')
                .attr('x1', 0)
                .attr('x2', xScale(data[data.length - 1].date))
                .attr('y1', 0)
                .attr('y2', 0)
              .selectAll('stop')
                .data([
                    {offset: '0%', color: areaGradient[0]},
                    {offset: '100%', color: areaGradient[1]}
                ])
              .enter().append('stop')
                .attr('offset', ({offset}) => offset)
                .attr('stop-color', ({color}) => color);

            lineGradientEl = metadataGroup.append('linearGradient')
                .attr('id', lineGradientId)
                .attr('class', 'line-gradient')
                .attr('gradientUnits', 'userSpaceOnUse')
                .attr('x1', 0)
                .attr('x2', xScale(data[data.length - 1].date))
                .attr('y1', 0)
                .attr('y2', 0)
              .selectAll('stop')
                .data([
                    {offset: '0%', color: lineGradient[0]},
                    {offset: '100%', color: lineGradient[1]}
                ])
              .enter().append('stop')
                .attr('offset', ({offset}) => offset)
                .attr('stop-color', ({color}) => color);
        }
function createGradients() {
            let metadataGroup = svg.select('.metadata-group');

            if (areaGradientEl || lineGradientEl) {
                svg.selectAll(`#${areaGradientId}`).remove();
                svg.selectAll(`#${lineGradientId}`).remove();
            }

            areaGradientEl = metadataGroup.append('linearGradient')
                .attr('id', areaGradientId)
                .attr('class', 'area-gradient')
                .attr('gradientUnits', 'userSpaceOnUse')
                .attr('x1', 0)
                .attr('x2', xScale(data[data.length - 1].date))
                .attr('y1', 0)
                .attr('y2', 0)
              .selectAll('stop')
                .data([
                    {offset: '0%', color: areaGradient[0]},
                    {offset: '100%', color: areaGradient[1]}
                ])
              .enter().append('stop')
                .attr('offset', ({offset}) => offset)
                .attr('stop-color', ({color}) => color);

            lineGradientEl = metadataGroup.append('linearGradient')
                .attr('id', lineGradientId)
                .attr('class', 'line-gradient')
                .attr('gradientUnits', 'userSpaceOnUse')
                .attr('x1', 0)
                .attr('x2', xScale(data[data.length - 1].date))
                .attr('y1', 0)
                .attr('y2', 0)
              .selectAll('stop')
                .data([
                    {offset: '0%', color: lineGradient[0]},
                    {offset: '100%', color: lineGradient[1]}
                ])
              .enter().append('stop')
                .attr('offset', ({offset}) => offset)
                .attr('stop-color', ({color}) => color);
        }
function createGradients ( ) { let metadataGroup = svg . select ( '.metadata-group' ) ; if ( areaGradientEl || lineGradientEl ) { svg . selectAll ( ` ${ areaGradientId } ` ) . remove ( ) ; svg . selectAll ( ` ${ lineGradientId } ` ) . remove ( ) ; } areaGradientEl = metadataGroup . append ( 'linearGradient' ) . attr ( 'id' , areaGradientId ) . attr ( 'class' , 'area-gradient' ) . attr ( 'gradientUnits' , 'userSpaceOnUse' ) . attr ( 'x1' , 0 ) . attr ( 'x2' , xScale ( data [ data . length - 1 ] . date ) ) . attr ( 'y1' , 0 ) . attr ( 'y2' , 0 ) . selectAll ( 'stop' ) . data ( [ { offset : '0%' , color : areaGradient [ 0 ] } , { offset : '100%' , color : areaGradient [ 1 ] } ] ) . enter ( ) . append ( 'stop' ) . attr ( 'offset' , ( { offset } ) => offset ) . attr ( 'stop-color' , ( { color } ) => color ) ; lineGradientEl = metadataGroup . append ( 'linearGradient' ) . attr ( 'id' , lineGradientId ) . attr ( 'class' , 'line-gradient' ) . attr ( 'gradientUnits' , 'userSpaceOnUse' ) . attr ( 'x1' , 0 ) . attr ( 'x2' , xScale ( data [ data . length - 1 ] . date ) ) . attr ( 'y1' , 0 ) . attr ( 'y2' , 0 ) . selectAll ( 'stop' ) . data ( [ { offset : '0%' , color : lineGradient [ 0 ] } , { offset : '100%' , color : lineGradient [ 1 ] } ] ) . enter ( ) . append ( 'stop' ) . attr ( 'offset' , ( { offset } ) => offset ) . attr ( 'stop-color' , ( { color } ) => color ) ; }
Creates the gradient on the area below the line
@return {void}
Creates the gradient on the area below the line