ZoomCharts Documentation

Version: 1.21.1 (2024-11-08)

FacetChart.settings.chartTypes.columns.valueLabels

This section is defined by the type LinearChartSettingsValueLabels.
Introduced in version 1.11.0.

Controls if and how the value labels for each column is displayed on the chart.

Properties

allowLabelSkip: boolean

Whether to allow skipping some labels if there isn't enough space to draw any labels at all

allowOverlap: boolean

Whether to draw overlapping value labels or not

allowOverlappingLabelStacking: boolean

Whether overlapping labels can be drawn in a stack instead if overlap is disallowed

contentsFunction: (value: number, position: number, series: LinearChartSettingsSeriesColumns | LinearChartSettingsSeriesLines, index?: number) => string
Introduced in version 1.11.0.
Version 1.16.0: added the position parameter.

Prepare custom content to display in value label along with numeric value. If this callback is not defined, then floating value is formatted with two digits after the decimal point and integer values are formatted without decimal digits. If this callback returns null or undefined for the given value, it won't be created. Note that null values are never passed to the callback. Usage example:

contentsFunction: function(value) { return value.toFixed(2) + "$"; }
Parameters
value: number

The value which has to be formatted.

position: number

The horizontal position (timestamp for TimeChart and item index for FacetChart) where the label is located.

index: number
Return value
Data type: string

a string to display in value label.

enabled: boolean
Introduced in version 1.11.0.

Whether to show series data labels.

minFontSize: number
Introduced in version 1.11.0.
Version 1.15.6: improved handling for font size units other than px.

The font size will be used as defined in series.valueLabel.style. However, if the available space is too narrow, font size will be gradually reduced to the minimum font size. If the minimum font size still does not fit, the values won't be displayed.

Note that this value must match the units that is being used in the style.textStyle.font setting. For example, if the font is specified as 2em Arial then this should be adjusted to, for example, 0.5, since the default value is tailored for font sizes in pixels.

position: "outside" | "outsideTop" | "outsideBottom" | "aboveValue" | "value" | "belowValue" | "insideTopAuto" | "insideTop" | "insideCenter" | "insideBase"
Introduced in version 1.11.0.
Version 1.12.0: added support for insideTopAuto and all inside options now automatically reduce the font size.

Value label position in perspective to the series data point. Note that in all of the inside options automatically reduce the font size (based on minFontSize setting) in situations when the height of the column or line area does not provide enough room for full-size labels.

Value label possible positions

Valid values:
  • outside - label will be located above (outside) data point for positive values and below the data point for negative.
  • outsideTop - label will be located above (outside) data point
  • outsideBottom - label will be located below (outside) data point
  • aboveValue - label will be located above the data point (outside for positive values and inside for negative).
  • value - label will be placed over the center of the data point.
  • belowValue - label will be located below data point.
  • insideTopAuto - acts as insideTop if there is enough space in the series area and outside if there is not.
  • insideTop - label will be located inside the series area at the upper edge for positive and bottom edge for negative values.
  • insideCenter - label will be located on the center of the series area.
  • insideBase - label will be located inside the series area at the bottom edge for positive and upper edge for negative values.
showNullData: boolean

Whether to skip drawing labels for null values

showZeroData: boolean

Whether to skip drawing labels for zero values

Introduced in version 1.11.0.
View section details

Data label text style.

useApproximateFontReduction: boolean

Advanced: Skip the contents function when calculating font width reduction. Less accurate, but can improve performance is using an expensive contentsFunction.

useStackedValue: boolean
Introduced in version 1.13.0.
Version 1.15.6: added support for and default changed to null.

Specifies if the value label render the stacked value (the sum of all values below it) or just the individual value of the particular series.

Default value null means that the stacked value is used unless the stack type is set to based.

xPosition: "center" | "insideRight" | "right" | "centerRight" | "outsideRight" | "insideLeft" | "left" | "centerLeft" | "outsideLeft"
Introduced in version 1.11.0.
Version 1.12.0: added support for insideTopAuto and all inside options now automatically reduce the font size.

Value label horizontal position in perspective to the series data point.

Valid values:
  • center - label will be located on the center of the series area.
  • insideRight - label will be located inside the series area, aligned to the right.
  • right - label will be located on the border of the series area, aligned to the right.
  • centerRight - label will be located to the right of the midpoint.
  • outsideRight - label will be placed outside the series area, aligned to the right.
  • insideLeft - label will be located inside the series area, aligned to the left.
  • left - label will be located on the border of the series area, aligned to the left.
  • centerLeft - label will be located to the left of the midpoint.
  • outsideLeft - label will be placed outside the series area, aligned to the left.
X