subtitles: Array

subtitles is a collection of subtitle elements. This allows you to have as many subtitles as you want in a chart.


subtitle: Object

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

Simple subtitle Attributes

Note
  • Subtitle has exactly the same properties as title object and hence all links below will redirect to corresponding pages in Title.
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 “#3A3A3A” “red”, “yellow” ,”#FF0000″ ..
subtitle fontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “arial” , “tahoma”, “verdana” ..
subtitle fontSize Number Auto. Calculated 25, 30 ..
subtitle fontStyle String ““normal”” “normal”,“italic”, “oblique”
subtitle fontWeight String “bold” “lighter”, “normal, “bold”, “bolder”
subtitle horizontalAlign String ““center”” “left”, “center”, “right”
subtitle margin Number 10 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
Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 4

  1. 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.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.