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 for labels on select and hover.
Basic Setting
Enable
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.selectLabels().background().stroke("Green");
// font color
series.labels().fontColor("#663399");
series.selectLabels().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);
That 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("TopCenter");
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":{
// series hub
"defaultSeriesSettings":{
// series settings
"column":{
// label settings
"labels": {
"anchor": "bottomCenter",
"position": "topCenter",
"fontFamily": "Menlo",
"fontSize": 14
}
}
}
}
};
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.