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 ="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
  // set spacing from the top
  // set spacing from the left
  // set width of the image
  // set height of the image
  // 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
  // set width of the image
  // set height of the image
  // set spacing from the top
  // manage overlapping
  // set spacing from the left

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();
    // event type
    // 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

You are looking at an outdated 7.10.0 version of this document. Switch to the 8.0.1 version to see the up to date information.