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

Notes
  • 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 “#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 textAlign String Depends on horizontalAlign “left”, “center”, “right”
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 Editing The Code

  Also See:    

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

4 Comments

  1. Donna says:

    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?

    • Sunil Urs says:

      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.

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