title: Object

Title allows you to set content, appearance and position of Chart’s Title.

Chart can have only one Title element. But you can have multiple subtitles if required. Subtitles have exactly the same properties as title but with smaller font size by default.


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


Simple Title Attributes

Applies To Attribute Type Default Options/Examples
title backgroundColor String null “red”, “yellow” , “#FF0000” ..
title borderColor String “black” “red”, “yellow” ,”#FF0000″ ..
title borderThickness Number 0 2,6 ..
title cornerRadius String 0 5,8, ..
title fontColor String “#3A3A3A” “red”, “yellow” ,”#FF0000″ ..
title fontFamily String “Calibri, Optima, Candara, Verdana, Geneva, sans-serif” “arial” , “tahoma”, “verdana” ..
title fontSize Number Auto. Calculated 25, 30 ..
title fontStyle String ““normal”” “normal”,“italic”, “oblique”
title fontWeight String “bold” “lighter”, “normal, “bold”, “bolder”
title horizontalAlign String ““center”” “left”, “center”, “right”
title margin Number 10 4, 12 ..
title padding Number 0 5, 8 ..
title text String null “Chart Title”
title verticalAlign String “top” “top”, “center”, “bottom”
title wrap Boolean true true, false
title maxWidth Number Automatically calculated based on the chart size. 200, 400 etc.
title dockInsidePlotArea Boolean false true, false
Try it Yourself by Editing the Code below.



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 15

    • mobiq,

      You can update title by changing “chart.options.title.text” property and calling chart.render().

    • Michelle, it’s not possible to replace image in-place of title. But you can set title as background image, but placement of title has to be handled properly. Refer this example to set image as background.

      • Thx! But sry, this is actually not an option.

        What i’d like to have is something like this:

        title: “You have 3021 points!”

        The higher the value, the larger the font-size.

        But okay, then i will have to solve my intention externally.

  1. I am having an issue, when I remove the title the top of the last y axis value is getting cut off. If I add the title it is fine. I have tried to enter a blank “” title but it is being ignored. How can I not have a title but have the top value still be completely visible?

  2. Hi
    is it possible to use different font-colors in the title. Like “Hello Steve, how are you?”

    Best regards and thanks
    Steve

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.