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.

Nudge data labels apart when they land on each other, across series as well as within one. On by default, since a label sitting on top of another is never what the chart meant to say. The pass does nothing to a chart whose labels already clear each other.

Labels separate along the value axis: a horizontal bar's labels move left and right, everything else moves up and down. Moving them the other way would slide a label over a neighbouring category and read as that category's label.

This matters most on a chart with two y-axes. The axes are scaled independently, so whether two labels collide is not a question of how close their values are: a column at 59.5K and a line at 68K can land on the same pixel row while 51K and 51.3K sit comfortably apart. It also helps on dense bar and waterfall charts, where a currency label is often wider than the bar it belongs to.

Set it to false to place every label strictly at its own mark, overlapping or not. Pass an object to tune it:

dataLabels: {
  avoidOverlap: {
    gap: 2,        // clear space left between two separated labels, in px
    maxShift: 16,  // how far a label may travel from its own mark
    hide: false,   // drop a label that still collides after both have moved
  },
}

maxShift defaults to roughly the label's own size along the axis it is separated on, which is far enough to clear a coincident twin and near enough that the label still reads as its mark's. A pair that cannot be separated within that budget is left overlapping unless you opt into hide, because silently removing a value is worse than the overlap it would fix.

Two cases are deliberately left alone. A rotated label (plotOptions.bar.dataLabels.orientation: 'vertical') is avoided but never moved, since its offset runs along its own rotated axis. Radial types — pie, donut, polarArea, radialBar and radar — keep their own label placement, which is angular rather than along a value axis.

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.

Labels that collide between two series at the same x are separated automatically by avoidOverlap, so reach for a per-point offsetY when you want a specific label in a specific place rather than merely clear of its neighbour:

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

An offset is applied before the de-overlap pass measures anything, so the two compose: the pass starts from where your offset put the label and only moves it further if it still collides.

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.

Background colour of the label rectangle.

Padding between the label text and the edge of its background rectangle.