Gradients

ApexCharts allows you to set gradient fill options easily with the fill.gradient property.

Setting gradients

Setting gradient fill option can be done by.

fill: {
  type: 'gradient',
  gradient: {
    shade: 'dark',
    type: "horizontal",
    shadeIntensity: 0.5,
    gradientToColors: undefined, // optional, if not defined - uses the shades of same color in series
    inverseColors: true,
    opacityFrom: 1,
    opacityTo: 1,
    stops: [0, 50, 100],
    colorStops: []
  }
}

Example

---

Gradient types

The type property controls the direction of the gradient. The available values are:

Value	Description
'horizontal'	Left to right
'vertical'	Top to bottom
'diagonal1'	Top-left to bottom-right
'diagonal2'	Top-right to bottom-left
'radial'	Radiates outward from the center
'sphere'	Spherical highlight effect

A vertical gradient works well on area charts, fading from a solid color at the top to transparent at the bottom:

var options = {
  chart: {
    type: 'area'
  },
  series: [{
    name: 'Revenue',
    data: [31, 40, 28, 51, 42, 109, 100]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  },
  fill: {
    type: 'gradient',
    gradient: {
      type: 'vertical',
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.1,
      stops: [0, 100]
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

---

gradientToColors

When gradientToColors is set, the gradient transitions from the series color to the specified color. When omitted, ApexCharts generates shades of the series color automatically.

fill: {
  type: 'gradient',
  gradient: {
    type: 'horizontal',
    gradientToColors: ['#F55555', '#6078ea', '#6094ea'],
    shadeIntensity: 1,
    opacityFrom: 1,
    opacityTo: 1,
    stops: [0, 100]
  }
}

Pass one color per series. The gradient for each series runs from its colors value to the matching entry in gradientToColors.

---

opacityFrom and opacityTo

These two properties control the alpha (opacity) at the start and end of the gradient. Values range from 0 (fully transparent) to 1 (fully opaque).

The standard fade-out pattern for area charts uses a high starting opacity and a low ending opacity:

fill: {
  type: 'gradient',
  gradient: {
    type: 'vertical',
    opacityFrom: 0.7,
    opacityTo: 0.1
  }
}

This creates a soft, layered look when multiple area series overlap.

---

colorStops

For fine-grained control over gradient colors and positions, use colorStops. Each stop defines a position (0-100), a color, and an opacity.

The following example creates a three-stop gradient that transitions from green to yellow to red:

var options = {
  chart: {
    type: 'bar'
  },
  series: [{
    name: 'Score',
    data: [20, 55, 41, 67, 22, 43, 90]
  }],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  fill: {
    type: 'gradient',
    gradient: {
      type: 'vertical',
      colorStops: [
        {
          offset: 0,
          color: '#00E396',
          opacity: 1
        },
        {
          offset: 50,
          color: '#FEB019',
          opacity: 1
        },
        {
          offset: 100,
          color: '#FF4560',
          opacity: 1
        }
      ]
    }
  }
}

var chart = new ApexCharts(document.querySelector('#chart'), options)
chart.render()

For multiple series, pass colorStops as an array of arrays, one inner array per series.

---

See the full configuration reference at fill.