5.20231.904
wijmo.chart Class DataLabel Wijmo API Class

DataLabel Class

The point data label for FlexChart.

Heirarchy

Properties

border

border: boolean

Gets or sets a value indicating whether the data labels have borders.

connectingLine

connectingLine: boolean

Gets or sets a value indicating whether to draw lines that connect labels to the data points.

content

content: any

Gets or sets the content of data labels.

The content can be specified as a string or as a function that takes HitTestInfo object as a parameter.

When the label content is a string, it can contain any of the following parameters:

  • seriesName: Name of the series that contains the data point (FlexChart only).
  • pointIndex: Index of the data point.
  • value: Value of the data point.
  • x: x-value of the data point (FlexChart only).
  • y: y-value of the data point (FlexChart only).
  • name: Name of the data point.
  • propertyName: any property of data object.

The parameter must be enclosed in curly brackets, for example 'x={x}, y={y}'.

In the following example, we show the y value of the data point in the labels.

 // Create a chart and show y data in labels positioned above the data point.
 var chart = new FlexChart('#theChart');
 chart.initialize({
     itemsSource: data,
     bindingX: 'country',
     series: [
         { name: 'Sales', binding: 'sales' },
         { name: 'Expenses', binding: 'expenses' },
         { name: 'Downloads', binding: 'downloads' }],
 });
 chart.dataLabel.position = "Top";
 chart.dataLabel.content = "{country} {seriesName}:{y}";

The next example shows how to set data label content using a function.

 // Set the data label content
 chart.dataLabel.content = function (ht) {
   return ht.name + ":" + ht.value.toFixed();
 }

offset

offset: number

Gets or sets the offset from label to the data point.

position

position: LabelPosition

Gets or sets the position of the data labels.

Methods

onRendering

Events

rendering

Occurs before the data label is rendered.