Apexcharts fade configuration for area chart

Question

I am trying to create a chart that will look like this: https://i.sstatic.net/9KpYO.png

but I am getting this: https://i.sstatic.net/oA7Vm.png

This is my configuration:

{
  chartOptions: {
    chart: {
      type: 'area',
      height: 200,
      toolbar: { show: false },
      zoom: { enabled: false },
    },
    colors: ["#01c40e"],
    grid: { show: false},
    dataLabels: { enabled: false },
    legend: { show: false },
    stroke: {
      curve: 'straight',
      width: 2,
    },
    xaxis: {
      type: 'numeric',
      labels: {show: false},
      axisBorder: {show:false},
      axisTicks: {show:false},
    },
    yaxis: {
      type: 'numeric',
      labels: {show: false},
      axisBorder: {show:false},
      axisTicks: {show:false},
    },
    fill: {
      type: "gradient",
      gradient: {
        shade: "light",
        type: "vertical",
        shadeIntensity: 0,
        opacityFrom: 0.2,
        opacityTo: 0.7,
        stops: [0, 50, 80, 100]
      }
    },
    tooltip: { enabled: false}
  },
  series: [{
    name: 'Series A',
    type: "area", // this is not in documentation but without it i get line, not area
    data: [4852, 4840, 4845, 4859, 4862, 4852]
  }]
}

Mostly it is about the fill configuration which fills the area too much and instead of fill being highest at the top, it is at the bottom, which makes the gradient inverse of what I need.

Answer 1

try swapping the values for opacityFrom and opacityTo,
and removing the option for stops

  fill: {
    type: "gradient",
    gradient: {
      shade: "light",
      type: "vertical",
      shadeIntensity: 0,
      opacityFrom: 0.7,
      opacityTo: 0.2
    }
  },

see following working snippet...

$(document).ready(function() {
  var chart = new ApexCharts(
    document.getElementById('chart'),
    {
      chart: {
        type: 'area',
        height: 200,
        toolbar: { show: false },
        zoom: { enabled: false },
      },
      colors: ["#01c40e"],
      grid: { show: false},
      dataLabels: { enabled: false },
      legend: { show: false },
      stroke: {
        curve: 'straight',
        width: 2,
      },
      xaxis: {
        type: 'numeric',
        labels: {show: false},
        axisBorder: {show:false},
        axisTicks: {show:false},
      },
      yaxis: {
        type: 'numeric',
        labels: {show: false},
        axisBorder: {show:false},
        axisTicks: {show:false},
      },
      fill: {
        type: "gradient",
        gradient: {
          shade: "light",
          type: "vertical",
          shadeIntensity: 0,
          opacityFrom: 0.7,
          opacityTo: 0.2
        }
      },
      tooltip: { enabled: false},
      series: [{
        name: 'Series A',
        type: "area", // this is not in documentation but without it i get line, not area
        data: [4852, 4840, 4845, 4859, 4862, 4852]
      }]
    }
  );

  chart.render();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>