chart

chart: {
  width: string | number,
  height: string | number,
  type: 'line' | 'area' | ...,
  requestedType: 'funnel' | 'pyramid' | 'gauge',
  foreColor: string,
  fontFamily: string,
  background: string,
  offsetX: number,
  offsetY: number,
  dropShadow: { ... },
    enabled: boolean,
    top: number,
    left: number,
    blur: number,
    opacity: number,
    color: string | string[],
    enabledOnSeries: undefined | number[],
  nonce: string,
  events: { ... },
    animationEnd: Function,
    beforeMount: Function,
    mounted: Function,
    updated: Function,
    mouseMove: Function,
    mouseLeave: Function,
    click: Function,
    xAxisLabelClick: Function,
    legendClick: Function,
    markerClick: Function,
    selection: Function,
    dataPointSelection: Function,
    dataPointMouseEnter: Function,
    dataPointMouseLeave: Function,
    beforeZoom: Function,
    beforeResetZoom: Function,
    zoomed: Function,
    scrolled: Function,
    brushScrolled: Function,
    keyDown: Function,
    keyUp: Function,
    drillDownStart: Function,
    drillDownEnd: Function,
    drillUp: Function,
    drillDownError: Function,
  brush: { ... },
    enabled: boolean,
    autoScaleYaxis: boolean,
    target: string,
    targets: string[],
  id: string,
  injectStyleSheet: boolean,
  group: string,
  locales: ApexLocale[],
    name: string,
    options: { ... },
      months: string[],
      shortMonths: string[],
      days: string[],
      shortDays: string[],
      toolbar: { ... },
        download: string,
        selection: string,
        selectionZoom: string,
        zoomIn: string,
        zoomOut: string,
        pan: string,
        reset: string,
        menu: string,
        exportToSVG: string,
        exportToPNG: string,
        exportToCSV: string,
  defaultLocale: string,
  parentHeightOffset: number,
  redrawOnParentResize: boolean,
  redrawOnWindowResize: boolean | ((args: any[]) => boolean),
  sparkline: { ... },
    enabled: boolean,
  stacked: boolean,
  stackType: 'normal' | '100%',
  stackOnlyBar: boolean,
  toolbar: { ... },
    show: boolean,
    offsetX: number,
    offsetY: number,
    tools: { ... },
      download: boolean | string,
      selection: boolean | string,
      zoom: boolean | string,
      zoomin: boolean | string,
      zoomout: boolean | string,
      pan: boolean | string,
      reset: boolean | string,
      customIcons: Array,
        icon: string,
        title: string,
        index: number,
        class: string,
        click: Function,
    export: { ... },
      csv: { ... },
        filename: undefined | string,
        columnDelimiter: string,
        headerCategory: string,
        headerValue: string,
        categoryFormatter: Function,
        valueFormatter: Function,
      svg: { ... },
        filename: undefined | string,
      png: { ... },
        filename: undefined | string,
      width: number,
      scale: number,
    autoSelected: 'zoom' | 'selection' | 'pan',
  zoom: { ... },
    enabled: boolean,
    type: 'x' | 'y' | 'xy',
    autoScaleYaxis: boolean,
    allowMouseWheelZoom: boolean,
    zoomedArea: { ... },
      fill: { ... },
        color: string,
        opacity: number,
      stroke: { ... },
        color: string,
        opacity: number,
        width: number,
  selection: { ... },
    enabled: boolean,
    type: string,
    fill: { ... },
      color: string,
      opacity: number,
    stroke: { ... },
      width: number,
      color: string,
      opacity: number,
      dashArray: number,
    xaxis: { ... },
      min: number,
      max: number,
    yaxis: { ... },
      min: number,
      max: number,
  animations: { ... },
    enabled: boolean,
    speed: number,
    animateGradually: { ... },
      enabled: boolean,
      delay: number,
    dynamicAnimation: { ... },
      enabled: boolean,
      speed: number,
    chartTypeMorph: { ... },
      enabled: boolean,
      speed: number,
    respectReducedMotion: boolean,
    largeDatasetThreshold: number,
  accessibility: { ... },
    enabled: boolean,
    description: string,
    announcements: { ... },
      enabled: boolean,
    keyboard: { ... },
      enabled: boolean,
      navigation: { ... },
        enabled: boolean,
        wrapAround: boolean,
  dataReducer: { ... },
    enabled: boolean,
    algorithm: 'lttb',
    targetPoints: number,
    threshold: number,
}

Default: '100%'

Width of the chart (pixels or percentage). See the full reference on the chart.height & chart.width page.

Default: 'auto'

Height of the chart (pixels, percentage, or auto golden-ratio). See the full reference on the chart.height & chart.width page.

Default: 'line'

Selects the chart type (line, area, bar, pie, and more). See the full reference on the chart.type page.

Default: '#373d3f'

Sets the text color for the chart. Defaults to #373d3f.

Default: 'Helvetica, Arial, sans-serif'

Sets the font family for all text elements of the chart. Defaults to 'Helvetica, Arial, sans-serif'

Default: ''

Background color for the chart area. If you want to set background with css, use .apexcharts-canvas to set it.

Default: 0

Sets the left offset for the entire chart.

Default: 0

Sets the top offset for the entire chart.

chart.dropShadow.enabled

Default: false

Enable a dropshadow for paths of the SVG

chart.dropShadow.enabledOnSeries

Default: undefined

Provide series index on which the dropshadow should be enabled.

chart.dropShadow.top

Default: 2

Set top offset for shadow

chart.dropShadow.left

Default: 2

Set left offset for shadow

chart.dropShadow.blur

Default: 4

Set blur distance for shadow

chart.dropShadow.color

Default: '#000'

Give a color to the shadow. If array is provided, each series can have different shadow color

chart.dropShadow.opacity

Default: 0.7

Set the opacity of shadow.

Default: undefined

Nonce attribute added to the style tag for CSP (Content Security Policy). If set, the nonce will be appended to the style tag.

Default: true

By default, ApexCharts injects its required CSS into the document <head> the first time a chart is rendered. Set this to false if you want to manage chart styles yourself (e.g. by importing apexcharts/dist/apexcharts.css in your bundle) and prevent the runtime injection.

Default: undefined

A chart ID is a unique identifier that will be used in calling certain ApexCharts methods. Also used in group option to sync charts. You will also need chart.id to be set in case you use updateOptions() or exec() methods.

Default: undefined

Setting chart.group with a common name for multiple charts will sync the tooltip, panning, and zooming across all charts with the same group name. Each chart needs to have a unique chart.id.

Example:

// Chart 1
var chart1 = new ApexCharts(el, {
  chart: {
    id: 'chart1',
    group: 'social',
  }
})

// Chart 2
var chart2 = new ApexCharts(el, {
  chart: {
    id: 'chart2',
    group: 'social',
  }
})

Default: 'en'

Use this option to set the default locale. Requires the locales array to have the locale data for that locale name.

chart.locales.name

Name of the locale you will be defining options for. Can be en, fr, etc.

chart.locales.options

chart.locales.options.months

Default: ['January', ..., 'December']

Full month names in your preferred language

chart.locales.options.shortMonths

Default: ['Jan', ..., 'Dec']

Abbreviations of months

chart.locales.options.days

Default: ['Sunday', ..., 'Saturday']

Full names of days in your language

chart.locales.options.shortDays

Default: ['Sun', ..., 'Sat']

Abbreviated day names

Default: 15

A small padding is applied to the bottom of the chart area to make the chart look neat. You may not need this in case you set a fixed height. This is useful if you have a sparkline chart in a small container.

Default: true

Re-render the chart when the element is resized. Useful if a chart is rendered in a dynamically sized container.

Default: true

Re-render the chart when the window is resized. Useful in cases where auto-resizing on window resize may cause issues.

Sparkline mode hides axes, grid, and labels to render a compact chart for small areas. See the full reference on the chart.sparkline page.

Default: false

Enables stacked option for axis charts. See example

Default: 'normal'

When stacked, should the stacking be percentage based or normal stacking. Available options:

'normal'
'100%'

Default: true

When using a combo chart (line and bar together), stack only the bar series and leave the line series unstacked.

Enable and configure zooming: per-axis zoom, auto-scale y-axis, mouse-wheel zoom, and the zoomed-area styling. See the full reference on the chart.zoom page.

Enable and style rectangular selection on the x, y, or both axes, with optional preset ranges. See the full reference on the chart.selection page.

Control load and update animations: speed, gradual animation, dynamic-data animation, chart-type morphing, and reduced-motion. See the full reference on the chart.animations page.

Built-in accessibility features for keyboard navigation and screen-reader announcements. Enabled by default, no setup required.

chart.accessibility.enabled

Default: true

Master switch for all accessibility features. Set to false to opt out entirely.

chart.accessibility.description

Default: undefined

A short text description of the chart that is announced to screen-reader users when the chart receives focus. Use this to summarize what the chart is showing (e.g. "Quarterly revenue 2024-2025, all four quarters above target").

chart.accessibility.announcements

chart.accessibility.announcements.enabled

Default: true

When true, the chart emits live-region announcements as the user navigates between data points or series with the keyboard. Set to false to silence announcements while keeping keyboard navigation active.

chart.accessibility.keyboard

chart.accessibility.keyboard.enabled

Default: true

Master switch for keyboard interactions. When true, the chart becomes focusable via Tab and exposes data points to assistive technology.

Downsamples large datasets before rendering so charts stay smooth with tens of thousands of points. Uses the LTTB (Largest-Triangle-Three-Buckets) algorithm, which preserves the visual shape of the series: peaks, troughs and trend changes are retained while redundant flat regions are thinned out.

Only kicks in when the series length exceeds threshold. Series below the threshold are rendered untouched.

chart: {
  dataReducer: {
    enabled: true,
    algorithm: 'lttb',
    targetPoints: 500,
    threshold: 2000
  }
}

The strategy adapts to the series type. Scalar line and area series use LTTB. Range series (rangeArea, rangeBar) and candlestick/OHLC series are downsampled with min-max bucket aggregation instead, which keeps each bucket's extremes so highs and lows are not thinned away.

chart.dataReducer.enabled

Default: false

Turn data reduction on. Off by default.

chart.dataReducer.algorithm

Default: 'lttb'

Algorithm used for scalar line and area series. Currently only 'lttb' is supported. Range and candlestick series use extreme-preserving bucket aggregation regardless of this setting.

chart.dataReducer.targetPoints

Default: 250

Approximate number of points to keep per series after reduction. Defaults to 250. Higher values preserve more detail at the cost of render time.

chart.dataReducer.threshold

Default: 500

Minimum series length before reduction kicks in. Series shorter than this are rendered without downsampling. Defaults to 500.

chart.brush.enabled

Default: false

Turn on this option to enable brush chart options. After you enable brush, you need to set target chart ID to allow the brush chart to capture events on the target chart.

chart.brush.target

Default: undefined

Chart ID of the target chart to sync the brush chart and the target chart. If you have an array of multiple chart IDs, use targets property instead.

chart.brush.autoScaleYaxis

Default: true

If set to true, the Y-axis will automatically scale based on the visible min/max range.

Note: One important configuration to set in a brush chart is the chart.selection option. The range which you set in chart.selection will act as brush in the brush chart

Here's an example code snippet how brush/target works


var targetChartOptions = {
  chart: {
    id: 'target-chart',
    type: 'line',
    height: 230,
    toolbar: {
      autoSelected: 'pan',
      show: false
    }
  },
}

var brushChartOptions = {
  chart: {
    height: 130,
    type: 'area',
    brush:{
      target: 'chart2',
      enabled: true
    },
    selection: {
      xaxis: {
        min: new Date('19 Jun 2017').getTime(),
        max: new Date('14 Aug 2017').getTime()
      }
    },
  },
}

And, here you will find a complete example of brush charts usage Brush chart demo.

Event callbacks for clicks, hovers, selection, zoom/scroll, and the mount/update lifecycle. See the full reference on the chart.events page.

chart

Configuration Structure

#chart

#width

#height

#type

#foreColor

#fontFamily

#background

#offsetX

#offsetY

#dropShadow

#enabled

#enabledOnSeries

#top

#left

#blur

#color

#opacity

#nonce

#injectStyleSheet

#id

#group

#defaultLocale

#locales

#name

#options

#months

#shortMonths

#days

#shortDays

#toolbar

#download

#selection

#selectionZoom

#zoomIn

#zoomOut

#pan

#reset

#menu

#exportToSVG

#exportToPNG

#exportToCSV

#parentHeightOffset

#redrawOnParentResize

#redrawOnWindowResize

#sparkline

#stacked

#stackType

#stackOnlyBar

#toolbar

#zoom

#selection

#animations

#accessibility

#enabled

#description

#announcements

#enabled

#keyboard

#enabled

#navigation

#enabled

#wrapAround

#dataReducer

#enabled

#algorithm

#targetPoints

#threshold

#brush

#enabled

#target

#autoScaleYaxis

#events

`chart`

`width`

`height`

`type`

`foreColor`

`fontFamily`

`background`

`offsetX`

`offsetY`

`dropShadow`

`enabled`

`enabledOnSeries`

`top`

`left`

`blur`

`color`

`opacity`

`nonce`

`injectStyleSheet`

`id`

`group`

`defaultLocale`

`locales`

`name`

`options`

`months`

`shortMonths`

`days`

`shortDays`

`toolbar`

`download`

`selection`

`selectionZoom`

`zoomIn`

`zoomOut`

`pan`

`reset`

`menu`

`exportToSVG`

`exportToPNG`

`exportToCSV`

`parentHeightOffset`

`redrawOnParentResize`

`redrawOnWindowResize`

`sparkline`

`stacked`

`stackType`

`stackOnlyBar`

`toolbar`

`zoom`

`selection`

`animations`

`accessibility`

`enabled`

`description`

`announcements`

`enabled`

`keyboard`

`enabled`

`navigation`

`enabled`

`wrapAround`

`dataReducer`

`enabled`

`algorithm`

`targetPoints`

`threshold`

`brush`

`enabled`

`target`

`autoScaleYaxis`

`events`