Labels

• Overview
• Basic Setting
  • Enabling / Disabling
  • Format Text
• Visual Settings
  • Background
  • Font
  • Position
  • Size
• Themes
• Minimum and Maximum Labels

Overview

Label is a text box that can be displayed along a point on a chart. Labels usually shows the information that each point contains. It may display any additional information if it is defined by the labels settings.

You can configure different settings of labels when they are hovered over and selected.

Basic Setting

Enabling / Disabling

In most of the cases, series labels are disabled by default. To enable them set true using the enabled() method.

// create a chart
chart = anychart.column();

// add a data series
series = chart.column([
  {x: "Veni", value: 1}, 
  {x: "Vidi", value: 2}, 
  {x: "Vici", value: 3}
]);

// enable labels for a series
// in any state
series.labels(true);
series.selectLabels(true);
series.hoverLabels(true);

Format Text

You can specify the text displayed in labels using Text Formatters mechanism. Here is how you can show a name of point instead of a value:

series.labels().format("{%x}");

Visual Settings

You can also change background, font and other settings.

// background border color
series.labels().background().stroke("#663399");
series.selected().labels().background().stroke("Green");

// font color
series.labels().fontColor("#663399");
series.selected().labels().fontColor("Green");

Background

Labels background can be set using background() method. More information about adjusting background can be found in Background tutorial.

// background settings
var background = series.labels().background();
background.enabled(true);
background.fill("#EEEEEE 0.8");
background.stroke("#888888");
background.cornerType("round");
background.corners(5);

This is how labels background with the settings from above looks like:

Font

Font settings are set as for any other Text:

// font labels font settings
chart.labels().fontFamily("Menlo");
chart.labels().fontSize(18);
chart.labels().fontDecoration("underline");
chart.labels().fontWeight(900);

Position

Labels postions is set using an anchor set by anchor() and position() methods. Anchor and position are set with values from anychart.enums.Anchor and anychart.enums.Position enums.

Fine tuning can be done using offsetX() and offsetY() methods.

Labels are rotated using rotation() method.

Here is how you can put labels in the center of columns:

// set labels position
labels = series.labels();
labels.position("center");
labels.anchor("center");

And here is a sample of rotated labels put on top of columns:

// set labels position
labels = chart.getSeries(0).labels();
labels.enabled(true);
labels.position("center-top");
labels.anchor("left");
labels.offsetY(-10);
labels.rotation(-90);

Size

Use width() and height() to set the labels width and height. Don't forget to format the text of the label properly to avoid text overflow.

// set labels size
series.labels().width(200);
series.labels().height(80);

In the sample below we have also used vAilgn() and hAlign() methods to set proper text placement:

Themes

Labels can be adjusted using AnyChart Themes. Themes make it possible to set the same settings for several charts. Here is a sample of adjusting labels using themes:

var themeSettings = {
  "column":{
    "defaultSeriesSettings":{
      "column":{
        "normal":{
            "labels": {
              "enabled": true,
              "anchor": "center",
              "position": "center",
              "fontFamily": "Courier",
              "fontSize": 18,
              "fontColor": "#ffffff",
              "format": "${%value}"
          }
        }
      }
    }
  }
};

Settings for the labels in the sample below are applied using themes. Click "launch in playground" to see how settings for labels can be applied using AnyChart themes.

Minimum and Maximum Labels

If you want to highlight points that have minimal or maximal values you can either manually enable labels for those points or use minLabels() and maxLabels() methods.

Here are a couple of samples that show how these methods can be applied.

To show labels only for maximal and minimal points on a stock chart use code like this:

// create a series
var series = chart.plot(0).ohlc(mapping);
// enable minimum and maximum labels for a series
series.minLabels(true);
// and change format for minLabels
series.minLabels().format("{%Low}");
// leave the maxLabels format default
series.maxLabels(true);

// set positions
series.maxLabels().position("open");
series.minLabels().position("center-bottom");

Note 1: Besided the usual positions you can choose the value-based position where label is located for multi-value series like candlestick, ohlc or range area.

Note 2: Minimum and maximum labels are shown in the selected range.

To color and configure minimal and maximal points differently in different states use code like this:

// create a series
series = chart.column(data);

// configure min and max labels
series.normal().maxLabels(true);
series.normal().maxLabels().fontColor("red");
series.hovered().maxLabels().fontSize(16);

series.normal().minLabels(true);  
series.normal().minLabels().fontColor("green");
series.hovered().minLabels().fontSize(16);