Title

• Overview
• Default Title
• Setting Text
• Visualization
  • Position
  • Background
  • Text Settings
• HTML in Title
• Adding Events

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

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

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

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.

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

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

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.