Still have questions?
Contact support
You are looking at an outdated 7.11.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 article

Adding Events

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

JsFiddle Playground