Apexchart adding gradient color on bar chart not as expected

Question

I'd like to create Bar Chart with Gradient Color, but when i read on documentation, there is no explanation how to create gradient color on Bar Chart (only available for Line Chart)

This is what i want to achieve, the color slowly change every step: like this

but, on apex, the gradient only effect on single bar like this

You can take a look this code

var options = {
  chart: {
    height: 380,
    type: "bar",
    foreColor: '#6D6D6D'
  },
  series: [
    {
      name: "Series 1",
      data: [2, 23, 19, 45, 38, 52, 45]
    }
  ],
  fill: {
    type: "gradient",
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.9,
      colorStops: [
        {
          offset: 0,
          color: "#EB656F",
          opacity: 1
        },
        {
          offset: 20,
          color: "#FAD375",
          opacity: 1
        },
        {
          offset: 60,
          color: "#61DBC3",
          opacity: 1
        },
        {
          offset: 100,
          color: "#95DA74",
          opacity: 1
        }
      ]
    }
  },
  grid: {
     borderColor: '#6D6D6D'
  },
  xaxis: {
    categories: [
      "01 Jan",
      "02 Jan",
      "03 Jan",
      "04 Jan",
      "05 Jan",
      "06 Jan",
      "07 Jan"
    ]
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

Thank you.

Answer 1

There are 4 gradient types in Apex chart that you can modify:

• vertical
• horizontal
• diagonal1
• diagonal2

You just need to add:

fill: {
  type: 'gradient',
  gradient: {
    type: [your-type]
      }
}