subtitles is a collection of subtitle elements. This allows you to have as many subtitles as you want in a chart.
subtitle allows you to set content, appearance and position of Chart’s subtitle. subtitle is very much like title except that its font size is lesser than title by default. subtitle is rendered below the main title object whenever its vertical and horizontal align properties are same as title.
var chart = new CanvasJS.Chart("container",
{
.
.
subtitles:[
{// subtitle 1
},
{// subtitle 2
},
.
],
.
});
chart.render();
| Applies To | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| subtitle | backgroundColor | String | null | “red”, “yellow” , “#FF0000” .. |
| subtitle | borderColor | String | “black” | “red”, “yellow” ,”#FF0000″ .. |
| subtitle | borderThickness | Number | 0 | 2,6 .. |
| subtitle | cornerRadius | Number | 0 | 5,8, .. |
| subtitle | fontColor | String | “#333333” | “red”, “yellow” ,”#FF0000″ .. |
| subtitle | fontFamily | String | “Impact, Charcoal, sans-serif” | “arial”, “tahoma”, “verdana” .. |
| subtitle | fontSize | Number | Auto. Calculated | 25, 30 .. |
| subtitle | fontStyle | String | “normal” | “normal”, “italic”, “oblique” |
| subtitle | fontWeight | String | “normal” | “lighter”, “normal”, “bold”, “bolder” |
| subtitle | horizontalAlign | String | “center” | “left”, “center”, “right” |
| subtitle | margin | Number | 5 | 4, 12 .. |
| subtitle | padding | Number | 0 | 5, 8 .. |
| subtitle | text | String | null | “Chart Title” |
| subtitle | verticalAlign | String | “top” | “top”, “center”, “bottom” |
| subtitle | wrap | Boolean | true | true, false |
| subtitle | maxWidth | Number | Automatically calculated based on the chart size. | 200, 400 etc. |
| subtitle | dockInsidePlotArea | Boolean | false | true, false |
Also See:
Comments 4
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix
I set my title and subtitle into vertical align: center, but they overlap each other. Is there any way they wont overlap? Or Can I add html tags on my title/subtitle/labels?
Donna,
As of now it is not possible to avoid overlapping when both are displayed at the center. Instead you can show one in the center another at a different location.
Is possible to place Subtitle next to each other , instead of one above other
Sorry, it’s not possible as of now to place subtitles next to each other.