DropShadow

You can add shadow to paths and various other elements in ApexCharts.

Adding shadow to default paths

Path shadow can be applied by configuring chart.dropShadow property.

dropShadow: {
  enabled: true,
  top: 0,
  left: 0,
  blur: 3,
  opacity: 0.5
}

---

Where the config lives

dropShadow is nested inside the chart option, not inside fill. The shadow applies to all series paths in the chart unless you restrict it with enabledOnSeries.

var options = {
  chart: {
    type: 'line',
    dropShadow: {
      enabled: true,
      top: 2,
      left: 0,
      blur: 4,
      opacity: 0.4
    }
  },
  series: [{
    name: 'Sales',
    data: [30, 40, 35, 50, 49, 60, 70]
  }],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  }
}

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

---

Colored shadow

Set the color property to any hex string to tint the shadow. A colored shadow creates a dramatic glow effect useful for highlighting a key series.

var options = {
  chart: {
    type: 'line',
    dropShadow: {
      enabled: true,
      color: '#1a73e8',
      top: 4,
      left: 0,
      blur: 8,
      opacity: 0.6
    }
  },
  series: [{
    name: 'Visitors',
    data: [100, 140, 120, 180, 160, 220, 210]
  }],
  xaxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
  }
}

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

---

Per-series shadow control

Use enabledOnSeries to restrict the shadow to specific series by their zero-based index. In the example below, the shadow is applied only to the first and third series (indexes 0 and 2).

var options = {
  chart: {
    type: 'line',
    dropShadow: {
      enabled: true,
      enabledOnSeries: [0, 2],
      top: 2,
      left: 0,
      blur: 4,
      color: '#000',
      opacity: 0.35
    }
  },
  series: [
    { name: 'Series A', data: [30, 40, 35, 50, 49] },
    { name: 'Series B', data: [20, 30, 25, 40, 39] },
    { name: 'Series C', data: [10, 20, 15, 25, 20] }
  ],
  xaxis: {
    categories: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  }
}

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

Series B (index 1) receives no shadow. Series A and C do.

---

Full config reference

All available properties for chart.dropShadow:

Property	Type	Description
enabled	boolean	Enables or disables the drop shadow
top	number	Vertical offset of the shadow in pixels
left	number	Horizontal offset of the shadow in pixels
blur	number	Blur radius of the shadow in pixels
color	string	Shadow color as a hex string (e.g. '#000')
opacity	number	Shadow opacity from 0 to 1
enabledOnSeries	number[]	Limits shadow to the series at these indexes

---

Performance note

Drop shadows are implemented as SVG filter effects. On charts with many data points (more than 100 per series), the filter computation adds measurable render cost. For large datasets, either disable drop shadows or use subtle values such as blur: 1 and opacity: 0.2 to keep the effect lightweight.

---

See the full configuration reference at chart.dropShadow.