code: 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);
          }
docs: Creates the gradient on the area below the line
  @return {void}