Module Chartjs_datalabels

Anchoring

An anchor point is defined by an orientation vector and a position on the data element. The orientation depends on the scale type (vertical, horizontal or radial). The position is calculated based on the datalabels.anchor option and the orientation vector.

Possible anchor values are defined in the Anchor module.

Clamping

The datalabels.clamp option, when true, enforces the anchor position to be calculated based on the visible geometry of the associated element (i.e. part inside the chart area).

NOTE: If the element is fully hidden (i.e. entirely outside the chart area), anchor points will not be adjusted and thus will also be outside the viewport.

Alignment and Offset

The datalabels.align option defines the position of the label relative to the anchor point position and orientation. Its value can be expressed either by a number representing the clockwise angle (in degree) or by one of the predefined string values.

Possible values for datalabels.align option are defined in the Align module.

The datalabels.offset option represents the distance (in pixels) to pull the label away from the anchor point. This option is not applicable when align is Align.center. Also note that if datalabels.align is Align.start, the label is moved in the opposite direction. The default value is 4.

Rotation

The datalabels.rotation option controls the clockwise rotation angle (in degrees) of the label, the rotation center point being the label center. The default value is 0 (no rotation).

Visibility

The datalabels.display option controls the visibility of labels. The option is scriptable, so it's possible to show/hide specific labels.

Possible values are defined in the Visibility module.

Overlap

The Visibility.auto option can be used to prevent overlapping labels, based on the following rules when two labels overlap:

• if both labels have datalabels.display option set to true, they will be drawn overlapping
• if both labels have datalabels.display option set to Visibility.auto, the one with the highest data index will be hidden. If labels are at the same data index, the one with the lowest dataset index will be hidden
• if one label has datalabels.display option set to true and the other one has Visibility.auto, the one with Visibility.auto will be hidden (whatever the data/dataset indices)

Clipping

When the datalabels.clip option is true, the part of the label which is outside the chart area will be masked.

For more information, see MDN

Text Alignment

The datalabels.textAlign option only applies to multiline labels and specifies the text alignment being used when drawing the label text.

NOTE: right-to-left text detection based on the current locale is not currently implemented.

Possible values are defined in the Text_align module.

For more information, see MDN

Listeners

The datalabels.listeners option allows to register callbacks to be notified when an event is detected on a specific label. This option is an object where the property is the type of the event to listen and the value is a callback with a unique context argument.

The context contains the same information as for scriptable options, can be modified (e.g. add new properties) and thus, if the callback explicitly returns true, the label is updated with the new context and the chart re-rendered. This allows to implement visual interactions with labels such as highlight, selection, etc.

Listeners can be registered for any label (options.plugin.datalabels.listener.*) or for labels of a specific dataset (dataset.datalabels.listeners.*).

Tip: If no listener is registered, incoming events are immediately ignored, preventing extra computation such as intersecting label bounding box. That means there should be no performance penalty for configurations that don't use events.