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



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();

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.


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


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
  // stick title to the left

JsFiddle Playground


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
  // underline text
  // set font family

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
"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 article Additional 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
  // stick text to the right side
  // set text size
  // set font family
  // unbold title
  // background settings
  var titleBackground = customTitle.background();
  // eanble background
  // disable fill
  // set black border to title
  // set container and draw title

Sample not available!


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