ApexCharts

theme

Configuration Structure

theme: {
  mode: 'light' | 'dark',
  palette: string,
  monochrome: { ... },
    enabled: boolean,
    color: string,
    shadeTo: 'light' | 'dark',
    shadeIntensity: number,
  accessibility: { ... },
    colorBlindMode: 'deuteranopia' | 'protanopia' | ...,
}

mode

Default: ''

Changing the theme.mode will also update the text and background colors of the chart.
Available Options

  • light
  • dark

palette

Default: 'palette1'

Available palettes - palette1 to palette10

palette1#008FFB#00E396#FEB019#FF4560#775DD0
palette2#3f51b5#03a9f4#4caf50#f9ce1d#FF9800
palette3#33b2df#546E7A#d4526e#13d8aa#A5978B
palette4#4ecdc4#c7f464#81D4FA#546E7A#fd6a6a
palette5#2b908f#f9a3a4#90ee7e#fa4443#69d2e7
palette6#449DD1#F86624#EA3546#662E9B#C5D86D
palette7#D7263D#1B998B#2E294E#F46036#E2C044
palette8#662E9B#F86624#F9C80E#EA3546#43BCCD
palette9#5C4742#A5978B#8D5B4C#5A2A27#C4BBAF
palette10#A300D6#7D02EB#5653FE#2983FF#00B1F2

monochrome

Single color is used as a base and shades are generated from that color.

enabled

theme.monochrome.enabled
Default: false

Whether to enable monochrome theme option.

color

theme.monochrome.color
Default: '#008FFB'

A hex color which will be used as the base color for generating shades

shadeTo

theme.monochrome.shadeTo
Default: 'light'

Accepts either light or dark

shadeIntensity

theme.monochrome.shadeIntensity
Default: 0.65

What should be the intensity while generating shades Accepts from 0 to 1