ChartCanvasSerie.DataLabels

Syntax

DataLabels: Object;

Description

The DataLabels property determines data label settings for chart data series points.

Comments

Use JSON or the setDataLabels method to set the property value, and the getDataLabels method to get the property value.

The object with settings can contain the following fields:

  1. Color: "rgba(145, 143, 141, 1.000000)" // Color
  2. Enabled: true // Display attribute
  3. Font: Object // Font
  4. Mask: "%Autovalue" // Text mask
  5. Position: "Center" // Location
  6. Rotation: 0 // Rotation
  7. ValueFormat: "#,##0.00"  // Number format

Example

Executing the example requires that the HTML page contains the Chart component named chart (see Example of Creating a Line Chart). Render data labels with points values for the points of the first data series with 0, 2, 4 indexes:

// Get the first data series
var serie = chart.getSerie(0);
for (var i in serie.getPoints()) {
    var point = serie.getPoints()[i];
    point.setDataLabels({
        Enabled: true
    });
    // Get settings of data labels
    var labelsOptions = serie.getDataLabels();
    labelsOptions.Text = point.getY();
    labelsOptions.Parent = serie;
    labelsOptions.Left = point.getPlotX();
    labelsOptions.Top = point.getPlotY();
    var dataLabel = new PP.Ui.ChartText(labelsOptions);
    point.setDataLabel(dataLabel);
};
// Render data labels for time series points
serie.drawDataLabels([0, 2, 4], true);

After executing the example data labels with points values were rendered for the first data series with the 0, 2 and 4 indexes:

See also:

ChartCanvasSerie