ApexCharts

annotations

Configuration Structure

annotations: {
  yaxis: YAxisAnnotations[],
    id: number | string,
    y: null | number | string,
    y2: null | number | string,
    strokeDashArray: number,
    fillColor: string,
    borderColor: string,
    borderWidth: number,
    opacity: number,
    offsetX: number,
    offsetY: number,
    width: number | string,
    yAxisIndex: number,
    label: AnnotationLabel,
      borderColor: string,
      borderWidth: number,
      borderRadius: number,
      text: string | string[],
      textAnchor: string,
      offsetX: number,
      offsetY: number,
      style: AnnotationStyle,
        background: string,
        color: string,
        fontFamily: string,
        fontWeight: string | number,
        fontSize: string,
        cssClass: string,
        padding: { ... },
          left: number,
          right: number,
          top: number,
          bottom: number,
      position: string,
      orientation: string,
      mouseEnter: Function,
      mouseLeave: Function,
      click: Function,
  xaxis: XAxisAnnotations[],
    id: number | string,
    x: null | number | string,
    x2: null | number | string,
    strokeDashArray: number,
    fillColor: string,
    borderColor: string,
    borderWidth: number,
    opacity: number,
    offsetX: number,
    offsetY: number,
    label: AnnotationLabel,
      borderColor: string,
      borderWidth: number,
      borderRadius: number,
      text: string | string[],
      textAnchor: string,
      offsetX: number,
      offsetY: number,
      style: AnnotationStyle,
        background: string,
        color: string,
        fontFamily: string,
        fontWeight: string | number,
        fontSize: string,
        cssClass: string,
        padding: { ... },
          left: number,
          right: number,
          top: number,
          bottom: number,
      position: string,
      orientation: string,
      mouseEnter: Function,
      mouseLeave: Function,
      click: Function,
  points: PointAnnotations[],
    id: number | string,
    x: number | string,
    y: null | number,
    yAxisIndex: number,
    seriesIndex: number,
    mouseEnter: Function,
    mouseLeave: Function,
    click: Function,
    marker: { ... },
      size: number,
      fillColor: string,
      strokeColor: string,
      strokeWidth: number,
      shape: string,
      offsetX: number,
      offsetY: number,
      cssClass: string,
    label: AnnotationLabel,
      borderColor: string,
      borderWidth: number,
      borderRadius: number,
      text: string | string[],
      textAnchor: string,
      offsetX: number,
      offsetY: number,
      style: AnnotationStyle,
        background: string,
        color: string,
        fontFamily: string,
        fontWeight: string | number,
        fontSize: string,
        cssClass: string,
        padding: { ... },
          left: number,
          right: number,
          top: number,
          bottom: number,
      position: string,
      orientation: string,
      mouseEnter: Function,
      mouseLeave: Function,
      click: Function,
    image: { ... },
      path: string,
      width: number,
      height: number,
      offsetX: number,
      offsetY: number,
  texts: TextAnnotations[],
    x: number,
    y: number,
    text: string,
    textAnchor: string,
    foreColor: string,
    fontSize: string | number,
    fontFamily: undefined | string,
    fontWeight: string | number,
    backgroundColor: string,
    borderColor: string,
    borderRadius: number,
    borderWidth: number,
    paddingLeft: number,
    paddingRight: number,
    paddingTop: number,
    paddingBottom: number,
  images: ImageAnnotations[],
    path: string,
    x: number,
    y: number,
    width: number,
    height: number,
}

yaxis

y

annotations.yaxis.y
Default: 0

Value on which the annotation will be drawn

y2

annotations.yaxis.y2
Default: null

If you provide this additional y2 value, a region will be drawn from y to y2.

strokeDashArray

annotations.yaxis.strokeDashArray
Default: 1

Creates dashes in borders of the SVG path. A higher number creates more space between dashes in the border.

borderColor

annotations.yaxis.borderColor
Default: '#c2c2c2'

Color of the annotation line

fillColor

annotations.yaxis.fillColor
Default: '#c2c2c2'

Fill Color of the region.
Only applicable if y2 is provided.

opacity

annotations.yaxis.opacity
Default: 0.3

Opacity of the filled region.

offsetX

annotations.yaxis.offsetX
Default: 0

Sets the left offset for annotation line

offsetY

annotations.yaxis.offsetY
Default: 0

Sets the top offset for annotation line

width

annotations.yaxis.width
Default: '100%'

Sets the width for annotation line

yAxisIndex

annotations.yaxis.yAxisIndex
Default: 0

When there are multiple y-axis, setting this options will put the annotation for that particular y-axis

borderColor

annotations.yaxis.borderColor
Default: '#c2c2c2'

Border Color of the label

borderWidth

annotations.yaxis.borderWidth
Default: 1

Border width of the label

borderRadius

annotations.yaxis.label.borderRadius
Default: 2

Border-radius of the label

text

annotations.yaxis.label.text
Default: undefined

Text for tha annotation label

textAnchor

annotations.yaxis.label.textAnchor
Default: 'end'

The alignment of text relative to label’s drawing position
Accepted values

  • start
  • middle
  • end

position

annotations.yaxis.label.position
Default: 'right'

Available Options

  • left
  • right

offsetX

annotations.yaxis.offsetX
Default: 0

Sets the left offset for annotation label

offsetY

annotations.yaxis.offsetY
Default: 0

Sets the top offset for annotation label

mouseEnter

annotations.yaxis.label.mouseEnter

Fires when user's mouse enter the label of the annotation.

mouseLeave

annotations.yaxis.label.mouseLeave

Fires when user's mouse leave the label of the annotation.

click

annotations.yaxis.label.click

Fires when user clicks on the label of the annotation.

style

annotations.yaxis.label.style

background

annotations.yaxis.label.style.background
Default: '#fff'

Background Color for the annotation label

color

annotations.yaxis.label.style.color
Default: undefined

ForeColor for the annotation label

fontSize

annotations.yaxis.label.style.fontSize
Default: '11px'

FontSize for the annotation label

fontWeight

annotations.yaxis.label.style.fontWeight
Default: 400

Font-weight for the annotation label

fontFamily

annotations.yaxis.label.style.fontFamily
Default: undefined

Font-family for the annotation label

cssClass

annotations.yaxis.label.style.cssClass

A custom Css Class to give to the annotation label elements

padding

annotations.yaxis.label.style.padding

left

annotations.yaxis.label.style.padding.left
Default: 5

Left padding for the label

right

annotations.yaxis.label.style.padding.right
Default: 5

Right padding for the label

top

annotations.yaxis.label.style.padding.top
Default: 2

Top padding for the label

bottom

annotations.yaxis.label.style.padding.bottom
Default: 2

Bottom padding for the label

xaxis

x

annotations.xaxis.x
Default: 0

Value on which the annotation will be drawn

x2

annotations.xaxis.x2
Default: null

If you provide this additional x2 value, a region will be drawn from x to x2.

strokeDashArray

annotations.xaxis.strokeDashArray
Default: 1

Creates dashes in borders of SVG path. A higher number creates more space between dashes in the border.

borderColor

annotations.xaxis.borderColor
Default: '#c2c2c2'

Color of the annotation line

fillColor

annotations.xaxis.fillColor
Default: '#c2c2c2'

Fill Color of the region. Only applicable if x2 is provided.

opacity

annotations.xaxis.opacity
Default: 0.3

Opacity of the filled region.

offsetX

annotations.xaxis.offsetX
Default: 0

Sets the left offset for annotation line

offsetY

annotations.xaxis.offsetY
Default: 0

Sets the top offset for annotation line

borderColor

annotations.xaxis.label.borderColor
Default: '#c2c2c2'

Border color of the label

borderWidth

annotations.xaxis.label.borderWidth
Default: 1

Border width of the label

borderRadius

annotations.xaxis.label.borderRadius
Default: 2

Border-radius of the label

text

annotations.xaxis.label.text
Default: undefined

Text for tha annotation label

textAnchor

annotations.xaxis.label.textAnchor
Default: 'middle'

The alignment of text relative to label’s drawing position Accepted values

  • start
  • middle
  • end

position

annotations.xaxis.label.position
Default: 'top'

Available Options

  • top
  • bottom

orientation

annotations.xaxis.label.orientation
Default: 'vertical'

Available Options

  • vertical
  • horizontal

offsetX

annotations.xaxis.label.offsetX
Default: 0

Sets the left offset for annotation label

offsetY

annotations.xaxis.label.offsetY
Default: 0

Sets the top offset for annotation label

mouseEnter

annotations.xaxis.label.mouseEnter

Fires when user’s mouse enter the label of the annotation.

mouseLeave

annotations.xaxis.label.mouseLeave

Fires when user’s mouse leave the label of the annotation.

click

annotations.xaxis.label.click

Fires when user clicks on the label of the annotation.

style

annotations.xaxis.label.style

background

annotations.xaxis.label.style.background
Default: '#fff'

Background Color for the annotation label

color

annotations.xaxis.label.style.color

ForeColor for the annotation label

fontSize

annotations.xaxis.label.style.fontSize
Default: '11px'

FontSize for the annotation label

fontWeight

annotations.xaxis.label.style.fontWeight
Default: 400

Font-weight for the annotation label

fontFamily

annotations.xaxis.label.style.fontFamily
Default: undefined

Font-family for the annotation label

cssClass

annotations.xaxis.label.style.cssClass

A custom Css Class to give to the annotation label elements

points

x

annotations.points.x
Default: 0

X Value on which the annotation will be drawn (can be either timestamp for datetime x-axis or string category for category x-axis)

y

annotations.points.y
Default: null

Y Value on which the annotation will be drawn

yAxisIndex

annotations.points.yAxisIndex
Default: 0

When there are multiple y-axis, setting this options will put the point annotation for that particular y-axis' y value

seriesIndex

annotations.points.seriesIndex
Default: undefined

In a multiple series, you will have to specify which series the annotation's y value belongs to. Not required for single series

mouseEnter

annotations.points.mouseEnter

Fires when user’s mouse enter the marker of point annotation.

mouseLeave

annotations.points.mouseLeave

Fires when user’s mouse leave the marker of point annotation.

click

annotations.points.click

Fires when user clicks on the marker of point annotation.

marker

annotations.points.marker

size

annotations.points.marker.size
Default: 4

Size of the marker.

fillColor

annotations.points.marker.fillColor
Default: '#fff'

Fill Color of the marker point.

strokeColor

annotations.points.marker.strokeColor
Default: '#333'

Stroke Color of the marker point.

strokeWidth

annotations.points.marker.strokeWidth
Default: 2

Stroke Size of the marker point.

shape

annotations.points.marker.shape
Default: 'circle'

Shape of the marker. Available Options for shape

  • circle
  • square

offsetX

annotations.points.marker.offsetX
Default: 0

Sets the left offset of the marker

offsetY

annotations.points.marker.offsetY
Default: 0

Sets the top offset of the marker

cssClass

annotations.points.marker.cssClass

Additional CSS classes to append to the marker

label

annotations.points.label

borderColor

annotations.points.label.borderColor
Default: '#c2c2c2'

Border Color of the label

borderWidth

annotations.points.label.borderWidth
Default: 1

Border width of the label

borderRadius

annotations.points.label.borderRadius
Default: 2

Border-radius of the label

text

annotations.points.label.text
Default: undefined

Text for tha annotation label

textAnchor

annotations.points.label.textAnchor
Default: 'middle'

The alignment of text relative to label’s drawing position Accepted values

  • start
  • middle
  • end

offsetX

annotations.points.label.offsetX
Default: 0

Sets the left offset for annotation label

offsetY

annotations.points.label.offsetY
Default: 0

Sets the top offset for annotation label

mouseEnter

annotations.points.label.mouseEnter

Fires when user’s mouse enter the label of the point annotation.

mouseLeave

annotations.points.label.mouseLeave

Fires when user’s mouse leave the label of the point annotation.

click

annotations.points.label.click

Fires when user clicks on the label of the point annotation.

style

annotations.points.label.style

background

annotations.points.label.style.background
Default: '#fff'

Background Color for the annotation label

color

annotations.points.label.style.color
Default: undefined

ForeColor for the annotation label

fontSize

annotations.points.label.style.fontSize
Default: '11px'

FontSize for the annotation label

fontWeight

annotations.points.label.style.fontWeight
Default: 400

Font-weight for the annotation label

fontFamily

annotations.points.label.style.fontFamily
Default: undefined

Font-family for the annotation label

cssClass

annotations.points.label.style.cssClass

A custom Css Class to give to the annotation label elements

padding

annotations.points.label.style.padding

left

annotations.points.label.style.padding.left
Default: 5

Left padding for the label

right

annotations.points.label.style.padding.right
Default: 5

Right padding for the label

top

annotations.points.label.style.padding.top
Default: 2

Top padding for the label

bottom

annotations.points.label.style.padding.bottom
Default: 2

Bottom padding for the label

path

annotations.points.image.path
Default: undefined

Provide a full path of the image to display in place of annotation.

width

annotations.points.image.width
Default: 20

Width of image annotation.

height

annotations.points.image.height
Default: 20

Height of image annotation.

offsetX

annotations.points.image.offsetX
Default: 0

Left offset of the image.

offsetY

annotations.points.image.offsetY
Default: 0

Top offset of the image.

texts

x

annotations.texts.x
Default: 0

X (left) position for the text relative to the element specified in appendTo property

y

annotations.texts.y
Default: 0

Y (top) position for the text relative to the element specified in appendTo property

text

annotations.texts.text
Default: ''

The main text to be displayed

textAnchor

annotations.texts.textAnchor
Default: 'start'

The alignment of text relative to label’s drawing position Accepted values

  • start
  • middle
  • end

foreColor

annotations.texts.foreColor
Default: undefined

ForeColor for the annotation label

fontSize

annotations.texts.fontSize
Default: '13px'

FontSize for the annotation label

fontWeight

annotations.texts.fontWeight
Default: 400

Font-weight for the annotation label

fontFamily

annotations.texts.fontFamily
Default: undefined

Font-family for the annotation label

appendTo

A query selector to which the text element will be appended.

borderColor

annotations.texts.borderColor
Default: '#c2c2c2'

Border Color for the label

borderRadius

annotations.texts.borderRadius
Default: 0

Border Radius for the label

borderWidth

annotations.texts.borderWidth
Default: 0

Border width for the label

paddingLeft

annotations.texts.paddingLeft
Default: 4

Left padding for the label

paddingRight

annotations.texts.paddingRight
Default: 4

Right padding for the label

paddingTop

annotations.texts.paddingTop
Default: 2

Top padding for the label

paddingBottom

annotations.texts.paddingBottom
Default: 2

Bottom padding for the label

images

path

annotations.images.path

An absolute path to the image

x

annotations.images.x

Left position for the image relative to the element specified in appendTo property

y

annotations.images.y

Top position for the image relative to the element specified in appendTo property

width

annotations.images.width

The width of the image

height

annotations.images.height

The height of the image

appendTo

A query selector to which the image element will be appended.