Still have questions?
Contact support
You are looking at an outdated 7.10.0 version of this document. Switch to the 7.13.0 version to see the up to date information.

Title

Overview

Every js chart in AnyChart can have one default title and unlimited number of additional custom titles. These text fields are used to create description for the chart data. By default, the .title() is placed on the top of the chart.

Default Title

Every chart has default title and this title can be enabled or disabled using .enabled() parameter

  // chart type
  var chart = anychart.column();
  
  // enable title
  var title = chart.title();
  title.enabled(true);

JsFiddle Playground

Setting Text

Of course you can specify your own texts for a title using .text() parameter, just like that:

  // set chart type
  var chart = anychart.column();
  
  // set title text
  var title = chart.title();
  title.text("Sales Performance");

JsFiddle Playground

Note: there is even more simple way to set custom text for a title. Text can be set using chart.title("Sales Performance") method without additional parameters.

Visualization

This section describes title visual appearance and ways to adjust it.

Position

Title can be placed anywhere on the chart plot. Parameter .orientation() sticks title to the side of the plot and parameter .align() controls alignment of the title.

  // adjust title
  var title = chart.title();
  // place title at the bottom
  title.orientation("bottom");
  // stick title to the left
  title.align("left");

JsFiddle Playground

Background

You can tune background of a title. Use .background() method to configure visual appearance of a background. Full information on adjusting background can be found in Background article.

JsFiddle Playground

Text Settings

Text is the main part of a title. Visit API to find out all parameters for tuning visual appearance of a chart title.

  // tune text
  var title = chart.title();
  // title text
  title.text("Sales Performance");
  // set font size
  title.fontSize(12);
  // underline text
  title.fontDecoration("underline");
  // set font family
  title.fontFamily("Tahoma");

JsFiddle Playground

HTML in Title

You can use HTML formatted text of a title. Use .useHtml() parameter an option to use HTML tags in title text.

  var title = chart.title();
  //enables HTML tags
  title.useHtml(true);
  title.text(
"Sales Performance"+
"<br><a style=\"color:#0000FF; font-size: 10px;\">"+
"according to annual report</a>"
  );

JsFiddle Playground

Note: the list of all supported tags for HTML text formatting can be found in Text Settings articleAdditional Titles

Chart can contain any number of additional titles. These titles can be placed anywhere on the plot.

  // create additional title
  var customTitle = anychart.ui.title();
  // set title text
  customTitle.text("according to annual report");
  // place title at the bottom
  customTitle.orientation("bottom");
  // stick text to the right side
  customTitle.align("right");
  // set text size
  customTitle.fontSize(11);
  // set font family
  customTitle.fontFamily("Tahoma");
  // unbold title
  customTitle.fontWeight(400);
  // background settings
  var titleBackground = customTitle.background();
  // eanble background
  titleBackground.enabled(true);
  // disable fill
  titleBackground.fill(null);
  // set black border to title
  titleBackground.stroke("#000000");
  
  // set container and draw title
  customTitle.container(stage);
  customTitle.draw();

Sample not available!

/samples/AS_Titles_07

Note: chart elements are drawn in a specific order and we recommend to use .draw() method for a custom title after the chart is drawn. –>

Adding Events

You can make your chart title interactive by adding event listeners of a different types. Sample below represents pointClick event, that triggers alert() function.

JsFiddle Playground

Here is the advanced sample of using events in titles. In this javascript sample we will show how chart footer can be used as "Back" button for self-drilldown charts. Click on bars to see detailed report on each sales manager and in detailed report click "Back to Sales Manager Report" button in the bottom left corner of line chart to load an initial chart.

JsFiddle Playground