Formatting the Chart Title

How to:

The title properties control the content, visibility, and format of the Chart Title.

Note: A chart title is not supported for sparkline charts and cannot be realigned in bullet charts.
Top of page
x
Syntax: How to Format the Chart Title
title: {
   text: 'string',
   visible: boolean,
   align: 'string', 
   font: 'string',
   color: 'string'
  }

where:

text: 'string'

Is a string that defines the title text. The default value is 'Chart Title'.

visible: boolean

Controls the visibility of the chart title. Valid values are:

  • true, which makes the chart title visible.
  • false, which makes the chart title not visible. This is the default value.
align: 'string'

Is a string that defines the alignment of the title, Valid values are:

  • 'center', which centers the title in the draw area. This is the default value.
  • 'chartFrame', which centers the title aligned with the chart frame.
  • 'left', which left-justifies the chart title in the draw area.
  • 'right', which right-justifies the chart title in the draw area.
font: 'string'

Is a string that defines the size, style, and, typeface of the chart title. The default value is '10pt Sans-Serif'.

color: 'string'

Is a string that defines the color of the chart title using a color name or numeric specification string. The default value is 'black'.

For information about specifying colors, see Colors and Gradients.
Example: Formatting the Chart Title

The following request generates a vertical bar chart with a title and subtitle. The alignment of the title is 'chartFrame', and the alignment of the subtitle is 'center':

GRAPH FILE WFLITE
SUM COGS_US GROSS_PROFIT_US REVENUE_US DISCOUNT_US
ACROSS PRODUCT_CATEGORY
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET STYLE *
INCLUDE=ENDEFLT,$
*GRAPH_JS
border:{color:'blue'},
chartFrame: {border: {width:2, color:'red'}},
legend: {position:'right'},
 title: {
         text: 'Chart Title, alignment chartFrame',
         visible: true,
         font: 'Bold 20pt Courier',
         align: 'chartFrame',
         color: 'blue'},
subtitle: {
   text: 'Subtitle, alignment center',
   font: 'Bold 16pt Comic Sans MS',
   visible: true,
   align: 'center',
   color: 'red'
   },
 
series: [
    {series: 0, color: 'lightgreen'},
    {series: 1, color: 'coral'},
    {series: 2, color: 'lightblue'},
    {series: 3, color: 'burlywood'} 
]
*END
ENDSTYLE
END

On the output, the title is centered aligned with the chart frame (align: 'chartFrame'), and the subtitle is centered in the draw area (align: 'center'):
Example: Formatting a Bullet Chart Title

The following request generates a bullet chart with a chart title. 

GRAPH FILE WFLITE
SUM COGS_US 
BY TIME_DAYOFWEEK
WHERE TIME_DAYNAME EQ 'SAT' OR 'SUN'
ON GRAPH HOLD FORMAT JSCHART
ON GRAPH SET VAXIS 80
ON GRAPH SET LOOKGRAPH CUSTOM
ON GRAPH SET STYLE *
*GRAPH_JS
chartType: 'bullet',
border: {width: 1, color: 'blue'},
  title: {visible:true,text: 'Chart Title', color: 'red'},
yaxis: {
   colorBands: [
       {start: 0,stop: 10000,color: 'silver'},
       {start: 10000,stop: 30000,color: 'lightgrey'},
       {start: 30000,stop: 60000,color: 'whitesmoke'},
       ], 
},
series: [
    {series: 0, group: 0, color: 'steelblue'},
     {series: 0, group: 1, color: 'red'},
]
*END

The output is:

Information Builders