dataLabels

To determine whether to show dataLabels or not

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.

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.

Ride data labels to their new position on a data-change update instead of snapping, so the labels follow their bars through a reorder (for example a bar chart race). On by default. Bar and column charts only; speed and easing follow chart.animations.dynamicAnimation. For a worked, end-to-end example, see How to build a bar chart race.

The bars, the markers and the axis ticks all reflow on one clock, so a label that jumps to its final slot on the first frame is the odd one out: it arrives several hundred milliseconds before the bar it belongs to. A label that has not moved is a per-label no-op, so this costs nothing on an update that does not reorder.

Enable riding the data labels to their new slots on each update.

Available Options:

• true (default)
• false

Tween each numeric data label from its previous value to the new one on update, like countUp.js, instead of swapping the number instantly. Your formatter runs on every frame, so number formatting is preserved throughout the count. Off by default. Bar and column charts only.

Enable the count-up value transition.

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

• start
• middle
• end

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.

Sets the left offset for dataLabels.

Accepts a number applied to every label, or a function resolved per data point. The function receives the same { series, seriesIndex, dataPointIndex, w } argument that dataLabels.style.colors accepts, and must return a number.

dataLabels: {
  offsetX: ({ seriesIndex }) => (seriesIndex === 0 ? -8 : 8),
}

dataLabels is chart-wide config, so a plain array keyed by data-point index would apply identically to every series. A function is what makes a per-series or per-point nudge possible, and it survives updateSeries where captured indices would desync. Keep it pure, as it may be called more than once per label.

Sets the top offset for dataLabels.

Accepts a number applied to every label, or a function resolved per data point, with the same signature as offsetX. This is the usual way to separate labels that collide between two series at the same x:

dataLabels: {
  offsetY: ({ seriesIndex }) => (seriesIndex === 0 ? -12 : 12),
}

Supported on the line, area, bar, rangeBar, treemap and radar paths.

FontSize for the label

FontFamily for the label

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

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).

Should draw a background rectangle around the label

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

Border radius of the background rect.

Border width of the background rect.

Border color of the background rect.

Opacity of the background color.

Enable a dropshadow for dataLabels background

Set top offset for shadow

Set left offset for shadow

Set blur distance for shadow

Set color of the shadow

Set the opacity of shadow.

Enable a text dropshadow

Set top offset for text shadow

Set left offset for text shadow

Set blur distance for text shadow

Set color of the text shadow

Set the opacity of text shadow.