Interface: SeriesPieDataLabelsOptionsObject

Highcharts. SeriesPieDataLabelsOptionsObject

Options for the series data labels, appearing next to each data point.

Since v6.2.0, multiple data labels can be applied to each single point by defining them as an array of configs.

In styled mode, the data labels can be styled with the .highcharts-data-label-box and .highcharts-data-label class names.

See also:

Extends

Members

align :Highcharts.AlignValue|null|undefined

The alignment of the data label compared to the point. If right, the right side of the label should be touching the point. For points with an extent, like columns, the alignments also dictates how to align it inside the box, as given with the inside option. Can be one of left, center or right.

Type:
Inherited From:
Default Value:
  • center
See also:

alignTo :string|undefined

Alignment method for data labels. Possible values are:

  • toPlotEdges: each label touches the nearest vertical edge of the plot area

  • connectors: connectors have the same x position and the widest label of each half (left & right) touches the nearest vertical edge of the plot area.

Type:
  • string | undefined
Since:
  • 7.0.0
See also:

allowOverlap :boolean|undefined

Whether to allow data labels to overlap. To make the labels less sensitive for overlapping, the dataLabels.padding can be set to 0.

Type:
  • boolean | undefined
Since:
  • 4.1.0
Inherited From:
Default Value:
  • false
See also:

backgroundColor :Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined

The background color or gradient for the data label.

Type:
Since:
  • 2.2.1
Inherited From:
See also:

borderColor :Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined

The border color for the data label. Defaults to undefined.

Type:
Since:
  • 2.2.1
Inherited From:
See also:

borderRadius :number|undefined

The border radius in pixels for the data label.

Type:
  • number | undefined
Since:
  • 2.2.1
Inherited From:
Default Value:
  • 0
See also:

borderWidth :number|undefined

The border width in pixels for the data label.

Type:
  • number | undefined
Since:
  • 2.2.1
Inherited From:
Default Value:
  • 0
See also:

className :string|undefined

A class name for the data label. Particularly in styled mode, this can be used to give each series' or point's data label unique styling. In addition to this option, a default color class name is added so that we can give the labels a contrast text shadow.

Type:
  • string | undefined
Since:
  • 5.0.0
Inherited From:
See also:

color :Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined

The text color for the data labels. Defaults to undefined. For certain series types, like column or map, the data labels can be drawn inside the points. In this case the data label will be drawn with maximum contrast by default. Additionally, it will be given a text-outline style with the opposite color, to further increase the contrast. This can be overridden by setting the text-outline style to none in the dataLabels.style option.

Type:
Inherited From:
See also:

connectorColor :Highcharts.ColorString|Highcharts.GradientColorObject|Highcharts.PatternObject|undefined

The color of the line connecting the data label to the pie slice. The default color is the same as the point's color.

In styled mode, the connector stroke is given in the .highcharts-data-label-connector class.

Type:
Since:
  • 2.1
See also:

connectorPadding :number|undefined

The distance from the data label to the connector. Note that data labels also have a default padding, so in order for the connector to touch the text, the padding must also be 0.

Type:
  • number | undefined
Since:
  • 2.1
Default Value:
  • 5
See also:

connectorShape :string|function|undefined

Specifies the method that is used to generate the connector path. Highcharts provides 3 built-in connector shapes: 'fixedOffset' (default), 'straight' and 'crookedLine'. Using 'crookedLine' has the most sense (in most of the cases) when 'alignTo' is set.

Users can provide their own method by passing a function instead of a String. 3 arguments are passed to the callback:

  • Object that holds the information about the coordinates of the label (x & y properties) and how the label is located in relation to the pie (alignment property). alignment can by one of the following: 'left' (pie on the left side of the data label), 'right' (pie on the right side of the data label) or 'center' (data label overlaps the pie).

  • Object that holds the information about the position of the connector. Its touchingSliceAt porperty tells the position of the place where the connector touches the slice.

  • Data label options

The function has to return an SVG path definition in array form (see the example).

Type:
  • string | function | undefined
Since:
  • 7.0.0
Default Value:
  • fixedOffset
See also:

connectorWidth :number|undefined

The width of the line connecting the data label to the pie slice.

In styled mode, the connector stroke width is given in the .highcharts-data-label-connector class.

Type:
  • number | undefined
Since:
  • 2.1
Default Value:
  • 1
See also:

crookDistance :string|undefined

Works only if connectorShape is 'crookedLine'. It defines how far from the vertical plot edge the coonnector path should be crooked.

Type:
  • string | undefined
Since:
  • 7.0.0
Default Value:
  • 70%
See also:

crop :boolean|undefined

Whether to hide data labels that are outside the plot area. By default, the data label is moved inside the plot area according to the overflow option.

Type:
  • boolean | undefined
Since:
  • 2.3.3
Inherited From:
Default Value:
  • true

defer :boolean|undefined

Whether to defer displaying the data labels until the initial series animation has finished.

Type:
  • boolean | undefined
Since:
  • 4.0.0
Inherited From:
Default Value:
  • true

distance :number|undefined

The distance of the data label from the pie's edge. Negative numbers put the data label on top of the pie slices. Can also be defined as a percentage of pie's radius. Connectors are only shown for data labels outside the pie.

Type:
  • number | undefined
Since:
  • 2.1
Default Value:
  • 30
See also:

enabled :boolean|undefined

Enable or disable the data labels.

Type:
  • boolean | undefined
Inherited From:
Default Value:
  • false
See also:

filter :Highcharts.DataLabelsFilterOptionsObject|undefined

A declarative filter to control of which data labels to display. The declarative filter is designed for use when callback functions are not available, like when the chart options require a pure JSON structure or for use with graphical editors. For programmatic control, use the formatter instead, and return undefined to disable a single data label.

Type:
Since:
  • 6.0.3
Inherited From:
See also:
Example
filter: {
    property: 'percentage',
    operator: '>',
    value: 4
}

format :string|undefined

A format string for the data label. Available variables are the same as for formatter.

Type:
  • string | undefined
Since:
  • 3.0
Inherited From:
Default Value:
  • point.value
See also:

formatter :Highcharts.DataLabelsFormatterCallbackFunction|undefined

Callback JavaScript function to format the data label. Note that if a format is defined, the format takes precedence and the formatter is ignored.

Type:
Inherited From:
Default Value:
  • function () { return this.y; }
See also:

inside :boolean|undefined

For points with an extent, like columns or map areas, whether to align the data label inside the box or to the actual value point. Defaults to false in most cases, true in stacked columns.

Type:
  • boolean | undefined
Since:
  • 3.0
Inherited From:

nullFormat :string|boolean|undefined

Format for points with the value of null. Works analogously to format. nullFormat can be applied only to series which support displaying null points.

Type:
  • string | boolean | undefined
Since:
  • 7.1.0
Inherited From:
See also:

nullFormatter :Highcharts.DataLabelsFormatterCallbackFunction|undefined

Callback JavaScript function that defines formatting for points with the value of null. Works analogously to formatter. nullPointFormatter can be applied only to series which support displaying null points.

Type:
Since:
  • 7.1.0
Inherited From:
See also:

overflow :Highcharts.DataLabelsOverflowValue|undefined

How to handle data labels that flow outside the plot area. The default is "justify", which aligns them inside the plot area. For columns and bars, this means it will be moved inside the bar. To display data labels outside the plot area, set crop to false and overflow to "allow".

Type:
Since:
  • 3.0.6
Inherited From:
Default Value:
  • justify

padding :number|undefined

When either the borderWidth or the backgroundColor is set, this is the padding within the box.

Type:
  • number | undefined
Since:
  • 2.2.1
Inherited From:
See also:

rotation :number|undefined

Text rotation in degrees. Note that due to a more complex structure, backgrounds, borders and padding will be lost on a rotated data label.

Type:
  • number | undefined
Inherited From:
Default Value:
  • 0
See also:

shadow :boolean|Highcharts.ShadowOptionsObject|undefined

The shadow of the box. Works best with borderWidth or backgroundColor. Since 2.3 the shadow can be an object configuration containing color, offsetX, offsetY, opacity and width.

Type:
Since:
  • 2.2.1
Inherited From:
Default Value:
  • false
See also:

shape :string|undefined

The name of a symbol to use for the border around the label. Symbols are predefined functions on the Renderer object.

Type:
  • string | undefined
Since:
  • 4.1.2
Inherited From:
Default Value:
  • square
See also:

softConnector :boolean|undefined

Whether to render the connector as a soft arc or a line with sharp break. Works only if connectorShape equals to fixedOffset.

Type:
  • boolean | undefined
Since:
  • 2.1.7
Default Value:
  • true
See also:

style :Highcharts.CSSObject|undefined

Styles for the label. The default color setting is "contrast", which is a pseudo color that Highcharts picks up and applies the maximum contrast to the underlying point item, for example the bar in a bar chart.

The textOutline is a pseudo property that applies an outline of the given width with the given color, which by default is the maximum contrast to the text. So a bright text color will result in a black text outline for maximum readability on a mixed background. In some cases, especially with grayscale text, the text outline doesn't work well, in which cases it can be disabled by setting it to "none". When useHTML is true, the textOutline will not be picked up. In this, case, the same effect can be acheived through the text-shadow CSS property.

For some series types, where each point has an extent, like for example tree maps, the data label may overflow the point. There are two strategies for handling overflow. By default, the text will wrap to multiple lines. The other strategy is to set style.textOverflow to ellipsis, which will keep the text on one line plus it will break inside long words.

Type:
Since:
  • 4.1.0
Inherited From:
Default Value:
  • {"color": "contrast", "fontSize": "11px", "fontWeight": "bold", "textOutline": "1px contrast" }
See also:

textPath :Highcharts.DataLabelsTextPathOptionsObject|undefined

Options for a label text which should follow marker's shape. Border and background are disabled for a label that follows a path. Note: Only SVG-based renderer supports this option. Setting useHTML to true will disable this option.

Type:
Since:
  • 7.1.0
Inherited From:

useHTML :boolean|undefined

Whether to use HTML to render the labels.

Type:
  • boolean | undefined
Inherited From:
Default Value:
  • false

verticalAlign :Highcharts.VerticalAlignValue|null|undefined

The vertical alignment of a data label. Can be one of top, middle or bottom. The default value depends on the data, for instance in a column chart, the label is above positive values and below negative values.

Type:
Since:
  • 2.3.3
Inherited From:

x :number|undefined

The x position offset of the label relative to the point in pixels.

Type:
  • number | undefined
Inherited From:
See also:

y :number|undefined

The y position offset of the label relative to the point in pixels.

Type:
  • number | undefined
Inherited From:
See also:

zIndex :number|undefined

The Z index of the data labels. The default Z index puts it above the series. Use a Z index of 2 to display it behind the series.

Type:
  • number | undefined
Since:
  • 2.3.5
Inherited From:
Default Value:
  • 6