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 “#333333” “red”, “yellow” ,”#FF0000″ ..
title fontFamily String “Impact, Charcoal, sans-serif” “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 horizontalAlign String “center” “left”, “center”, “right”
title margin Number 5 4, 12 ..
title padding Number 0 5, 8 ..
title text String null “Chart Title”
title textAlign String Depends on horizontalAlign “left”, “center”, “right”
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 Editing The Code

  Also See:    

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

15 Comments

    • Anjali says:

      mobiq,

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

    • Vishwas R says:

      UPDATE: We have just released v1.9.6 Beta with Methods & Properties, which allows you to programmatically access internally calculated values. Please refer to the release blog for more information. Also, take a look at this example to place image on top of title.

      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.

      • r3mc0 says:

        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.

  6. Craig says:

    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?

  7. Steve says:

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

    Best regards and thanks
    Steve

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