Overview – Displaying and Customizing StockChart Title

A StockChart title usually appears at the top and provides a concise description of the StockChart.

CanvasJS JavaScript StockChart Title

Syntax

Below is the syntax of a title.

var stockChart = new CanvasJS.StockChart("container",
{
 .
 .
 title: {
    text: "StockChart Title"
 },
 .
 .
});
stockChart.render();

Creating a Basic Title

The most important title attribute is text. In the following example we have a title object with a simple text attribute.

Try Editing The Code

Styling the Title

There are a number of attributes you can set inside title object and Style it the way you want. Table below lists some of the styling attributes.

Applies To Attribute Type Default Options/Examples
title backgroundColor string “transparent” “red”, “rgb(255,0,0)”, “#dedede”…
title borderColor string “black” “red”, “rgb(255,0,0)”, “#dedede”…
title borderThickness number 0 2,4…
title cornerRadius Number 0 2,4,…
title fontColor string “#3A3A3A” “red”, “rgb(255,0,0)”, “#dedede”…
title fontFamily string “calibri” “arial” , “tahoma”, “verdana” ..
title fontSize number Auto Calculated 25, 30 ..
title fontStyle string ““normal”” “normal”,“italic”, “oblique”
title fontWeight string “normal” “lighter”, “normal, “bold”, “bolder”
title margin number 5 10, 12…
title padding number 0 1, 3…
title text String null “StockChart Title”
title wrap Boolean true true, false
title maxWidth Number Automatically calculated based on the chart size. 200, 400 etc.
title textAlign String Depends on horizontalAlign. “left”, “center”, “right”

Here is an example which shows how to style title.

Try Editing The Code

Title Alignment

Title can be positioned in 8 different places by combining verticalAlign and horizontalAlign properties. Below is a table showing various combinations.

Options horizontalAlign verticalAlign
1 left top
2 left center
3 left bottom
4 center top
5 center bottom
6 right top
7 right center
8 right bottom

You can try out all the combinations in the below example.

Try Editing The Code

Finishing it up

By using the appropriate title attributes, you can match title appearance with your page/application theme. Try using the attributes and come up with your own styles.

Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question