Overview – Displaying and Customizing StockChart Title
A StockChart title usually appears at the top and provides a concise description of the StockChart.
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.
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. |
Here is an example which shows how to style title.
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.
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.
Also See: