Colors

ApexCharts gives control to set color of every element of the chart.

Setting colors of series

The primary colorSet from which other elements also inherits is defined in the root colors property.
To set colors globally for all charts, use Apex.colors.

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

Setting fill colors of paths

Set fill Colors from fill.colors property.
To set fill colors globally for all charts, use Apex.fill.colors.

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

Setting colors of dataLabels

You can set the colors of dataLabels using dataLabels.style.colors property.

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

Setting marker colors (Optional as inherited from main colors property)

To set custom marker colors, you need to change markers.colors property.

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

Setting grid colors (rows and columns)

To set custom grid row and column colors, you need to set grid.row.colors & grid.column.colors property.

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