How to add linear gradient with fade effect to Highcarts sparkline chart?

Question

I have a highcharts chart and the figma file looks like the image below. The Highcharts chart is a sparkline chart. How would I add the transparency and linear-gradient effect to the chart?

Answer 1

The sparkline chart uses many area types of charts and the gradient for area series can be added via series.fillColor option as follows:

Example code:

  series: [{
    data: [1, 2, 3, 4, 5],
    fillColor: {
      linearGradient: {
        x1: 0,
        y1: 0,
        x2: 0,
        y2: 1
      },
      stops: [
        [0, Highcharts.getOptions().colors[0]],
        [1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
      ]
    }
  }]

Demos: https://jsfiddle.net/BlackLabel/ak1yrL0w/ https://jsfiddle.net/BlackLabel/sr0xnw1d/

API Reference: https://api.highcharts.com/highcharts/series.area.fillColor