dataLabels

Configuration Structure

dataLabels: {
enabled: boolean,
enabledOnSeries: undefined | number[],
textAnchor: 'start' | 'middle' | 'end',
distributed: boolean,
offsetX: number,
offsetY: number,
style: { ... },
fontSize: string,
fontFamily: string,
fontWeight: string | number,
colors: any[],
background: { ... },
enabled: boolean,
foreColor: string,
backgroundColor: string,
borderRadius: number,
padding: number,
opacity: number,
borderWidth: number,
borderColor: string,
dropShadow: ApexDropShadow,
enabled: boolean,
top: number,
left: number,
blur: number,
opacity: number,
color: string,
dropShadow: ApexDropShadow,
enabled: boolean,
top: number,
left: number,
blur: number,
opacity: number,
color: string,
formatter: Function,
}

enabled

Default: true

To determine whether to show dataLabels or not

enabledOnSeries

Default: undefined

Allows showing series only on specific series in a multi-series chart. For eg., if you have a line and a column chart, you can show dataLabels only on the line chart by specifying it's index in this array property.

formatter

The formatter function allows you to modify the value before displaying Example:


  formatter: function(value, { seriesIndex, dataPointIndex, w }) {
    return w.config.series[seriesIndex].name + ":  " + value
  }

In the code above, seriesIndex is useful in multi-series chart, while dataPointIndex is the index of data-point in that series. w is an object consisting all globals and configuration which can be utilized the way mentioned in the above code.

textAnchor

Default: 'middle'

The alignment of text relative to dataLabel's drawing position
Accepted values

  • start
  • middle
  • end

distributed

Default: false

Similar to plotOptions.bar.distributed, this option makes each data-label discrete. So, when you provide an array of colors in datalabels.style.colors, the index in the colors array correlates with individual data-label index of all series.

offsetX

Default: 0

Sets the left offset for dataLabels

offsetY

Default: 0

Sets the top offset for dataLabels

style

fontSize

dataLabels.style.fontSize
Default: '12px'

FontSize for the label

fontFamily

dataLabels.style.fontFamily
Default: undefined

FontFamily for the label

fontWeight

dataLabels.style.fontWeight
Default: 600

Font weight for the label. Can be String ('bold') or number (400/500)

colors

dataLabels.style.colors
Default: undefined

ForeColors for the dataLabels. Accepts an array of string colors (['#333', '#999']) or an array of functions ([function(opts) { return '#333' }]) (Each index in the array corresponds to the series).

enabled

Default: true

Should draw a background rectangle around the label

foreColor

dataLabels.background.foreColor
Default: '#fff'

Color of the label when background is enabled. This will override the colors above in style key.

borderRadius

dataLabels.background.borderRadius
Default: 2

Border radius of the background rect.

borderWidth

dataLabels.background.borderWidth
Default: 1

Border width of the background rect.

borderColor

dataLabels.background.borderColor
Default: '#fff'

Border color of the background rect.

opacity

dataLabels.background.opacity
Default: 0.9

Opacity of the background color.

dropShadow

enabled

Default: true

Enable a dropshadow for dataLabels background

top

dataLabels.background.dropShadow.top
Default: 1

Set top offset for shadow

left

dataLabels.background.dropShadow.left
Default: 1

Set left offset for shadow

blur

dataLabels.background.dropShadow.blur
Default: 1

Set blur distance for shadow

color

dataLabels.background.dropShadow.color
Default: '#000'

Set color of the shadow

opacity

dataLabels.background.opacity
Default: 0.9

Set the opacity of shadow.

dropShadow

enabled

Default: true

Enable a text dropshadow

top

dataLabels.background.dropShadow.top
Default: 1

Set top offset for text shadow

left

dataLabels.background.dropShadow.left
Default: 1

Set left offset for text shadow

blur

dataLabels.background.dropShadow.blur
Default: 1

Set blur distance for text shadow

color

dataLabels.background.dropShadow.color
Default: '#000'

Set color of the text shadow

opacity

dataLabels.background.opacity
Default: 0.9

Set the opacity of text shadow.