Still have questions?
Contact support

Labels

Overview

Custom labels are text or image elements that can be placed anywhere on your chart or map to add descriptions or comments. Labels also can have actions attached.

Text Labels

The sample below demonstrates a label placed in the right top corner, containing some information about the chart data.

JsFiddle Playground

Image Labels

If you want to use image as a label and you don't need any text on this image, use stage() and define the image and its appearance settings using the image() method of the stage.

The sample below shows a revenue chart with AnyChart logo in the left top corner of data plot. The code should be similar to this one:

// create stage
var stage = anychart.graphics.create("container");

// define chart type and set data
var chart = anychart.pieChart([
  {x: "Product A", value: 9000},
  {x: "Product B", value: 5000},
  {x: "Product C", value: 1400},
  {x: "Product D", value: 590},
  {x: "Product E", value: 8813}
]);

// create image label
var image = stage.image();
// set image source
image.src("//static.anychart.com/images/logo_anychart.gif");
// set spacing from the top
image.y(15);
// set spacing from the left
image.x(25);
// set width of the image
image.width(50);
// set height of the image
image.height(50);
// manage overlapping
image.zIndex(chart.zIndex() + 1);

These settings will allow you to display chart the following way:

JsFiddle Playground

Attaching Actions

You can attach actions to labels and turn them into controls that can change an appearance of a chart or invoke some external function.

Sample below will demonstrate you calling external function on image labels click.

Note: In the previous sample we've used label() without text but with an image as a background. For such cases you can use image() method.

var image = stage.image();
// source of the image
image.src("//static.anychart.com/images/column.png")
// set width of the image
image.width(25)
// set height of the image
image.height(25)
// set spacing from the top
image.y(20)
// manage overlapping
image.zIndex(2)
// set spacing from the left
image.x(35);

To attach an action to the image you have to set listen() method for the image() Full list of available actions is described in Event Listeners article.

var myImage = stage.image();
myImage.src("//static.anychart.com/images/column.png");
myImage.align("topleft");

myImage.listen(
  // event type
  "click",
  // your function
  function() {/*custom function code*/}
)

Here is a js chart with three custom images. Click on any of them invokes function of redrawing chart using same data but different chart type.

JsFiddle Playground