Colors

ApexCharts colors every element of a chart from one primary source, the root colors array, and lets you override any element on top of that. Set colors to control the series (and everything that inherits from them), then reach for the per-element options when you need a fill, data label, marker, or gridline to differ. You can also give every data point its own color with distributed, apply gradients through the fill, or set any of it globally so every chart on the page matches.

Key takeaways

Series colors: the root colors array is the primary color set; other elements inherit from it unless you override them.
Per-element overrides: fill.colors, dataLabels.style.colors, markers.colors, and grid.row.colors / grid.column.colors each take their own array.
Per-point colors: set distributed: true (for example on a bar) to color each data point from the palette instead of coloring by series.
Global colors: set Apex.colors (and the other Apex.* equivalents) to apply colors to every chart on the page.
Gradients and palettes live in the Gradients and Themes guides; this page is about setting explicit colors per element.

Which option colors which element?

Element	Option	Global equivalent
Series (primary set)	`colors`	`Apex.colors`
Fills (paths, areas, bars)	`fill.colors`	`Apex.fill.colors`
Data labels	`dataLabels.style.colors`	`Apex.dataLabels.style.colors`
Markers	`markers.colors`	`Apex.markers.colors`
Grid rows	`grid.row.colors`	`Apex.grid.row.colors`
Grid columns	`grid.column.colors`	`Apex.grid.column.colors`

Everything not explicitly overridden inherits from the root colors.

Setting series colors

The root colors array is the primary color set. ApexCharts cycles through it as it assigns colors to series, and most other elements inherit from it. To set colors for every chart at once, use Apex.colors.

colors: ['#F44336', '#E91E63', '#9C27B0']

If you would rather pick a ready-made set than list hex codes, use a built-in palette with theme.palette instead. An explicit colors array always overrides the palette. See Themes for palettes and the full color-resolution order.

Coloring each data point (distributed)

By default a chart colors by series: every point in a series shares one color. To color by data point instead, so each bar or slice takes the next color from the palette, enable distributed.

var options = {
  chart: { type: 'bar' },
  plotOptions: { bar: { distributed: true } },
  colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0'],
  series: [{ name: 'Score', data: [44, 55, 41, 67, 22] }],
  xaxis: { categories: ['A', 'B', 'C', 'D', 'E'] }
}

Use it for single-series category charts where each category should stand out. It is available on bar, and also on types like heatmap and treemap that color by value.

Setting fill colors of paths

Set fill colors from the fill.colors property. To set them globally, use Apex.fill.colors.

fill: {
  colors: ['#F44336', '#E91E63', '#9C27B0']
}

Setting colors of data labels

Set data-label colors with the dataLabels.style.colors property.

dataLabels: {
  style: {
    colors: ['#F44336', '#E91E63', '#9C27B0']
  }
}

Setting marker colors

Marker colors are inherited from the root colors by default. To set them explicitly, change the markers.colors property.

markers: {
  colors: ['#F44336', '#E91E63', '#9C27B0']
}

Setting grid colors (rows and columns)

For alternating grid backgrounds, set grid.row.colors and grid.column.colors. ApexCharts alternates through each array band by band.

grid: {
  row: {
    colors: ['#F44336', '#E91E63', '#9C27B0']
  },
  column: {
    colors: ['#F44336', '#E91E63', '#9C27B0']
  }
}

Gradients

To fill series with gradients instead of flat colors, set fill.type: 'gradient' and configure fill.gradient. Gradients have their own options (direction, opacity stops, gradientToColors), so they are covered in the dedicated Gradients guide.

Frequently asked questions

How do I set a different color per series?

Pass one color per series in the root colors array; entry i colors series i. If there are more series than colors, ApexCharts cycles through the array.

How do I give each bar or point its own color?

Enable distributed for the chart type (for example plotOptions.bar.distributed: true). Each data point then takes the next color from colors or the active palette, instead of coloring by series.

How do I set colors for every chart on the page?

Set the global equivalent before rendering any chart, for example window.Apex = { colors: ['#008FFB', '#00E396'] }. Each element has its own Apex.* equivalent (Apex.fill.colors, Apex.markers.colors, and so on). A chart's own options still override the globals.

Why is my colors array being ignored?

An explicit colors array takes precedence over theme.palette, but it sits below CSS --apx-* design tokens and other higher-priority sources in v6. See the full order in How ApexCharts resolves colors.

How do I use a built-in palette or dark mode instead of listing colors?

Use theme.palette for a preset set and theme.mode: 'dark' for a dark appearance. Both, plus CSS design tokens and OS-aware theming, are in the Themes guide.

Summary

Set the root colors array first: it is the primary color set that the rest of the chart inherits from, and Apex.colors applies it everywhere. Override individual elements with fill.colors, dataLabels.style.colors, markers.colors, and grid.row.colors / grid.column.colors, each with its own Apex.* global. Reach for distributed when each data point should have its own color rather than each series. For gradient fills see the Gradients guide, and for preset palettes, dark mode, and the color-resolution order see Themes.