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();
| 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 | 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 |
Comments 15
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
Hi,
How can I change ‘title’ of chart dynamically like datapoints?
thanks
mobiq
mobiq,
You can update title by changing “chart.options.title.text” property and calling chart.render().
Thanks again. I found it at https://canvasjs.com/docs/charts/integration/jquery/chart-types/jquery-column-chart/
Could you please guide me to programming guide – how to set properties dynamically? Reference guide has list of properties but doesn’t not describe how one can get or set these properties dynamically.
Can I have ability to add two line titles to chart?
Andriy,
You can use subtitle to create multiple subtitles in a chart.
Can I put an image in replace of the title text?
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.
Is it possible to have different font sizes in one title?
It is not possible to have different fontSizes in the same Title. But you can consider using subtitles in such cases.
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.
The higher the value of the number, the larger the font-size of the number…
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?
Craig,
We are unable to reproduce the issue. It will help us to resolve if you can create a fiddle with the issue.
Hi
is it possible to use different font-colors in the title. Like “Hello Steve, how are you?”
Best regards and thanks
Steve
Sorry, Steve
As of now title doesn’t support multiple font color.