# Caption and sub-caption

The caption (also called the chart title) is the heading of your chart, whereas a sub-caption is the text that appears just below the caption. In the sections below, you can see how to add a caption, subcaption, x-axis name, and y-axis name to your charts, as well as configure their font properties.

Cartesian charts have axes that run along the left and the bottom borders of the canvas. The x-axis runs along the bottom border of the canvas, running from left to right. The y-axis runs along the left border of the canvas, going from the bottom and to the top.

## Set the Caption and Subcaption

• Specify the caption of the chart using the caption attribute, which accepts text values.

• Specify the sub-caption of the chart using the subCaption attribute, which accepts text values.

Refer to the code given below:

{
"chart": {
"caption": "Monthly Revenue",
"subCaption": "Last year"
}
}

The chart will look like as shown below:

## Customize Font Properties

Use the following attributes to customize the font color, size, formatting, etc., of the caption.

• Set the caption font family using the captionFont attribute.

• Set the caption font color in hex code using the captionFontColor attribute.

• Set the caption font size (between 0 and 72) using the captionFontSize attribute.

• Set caption font to bold by setting the value of the captionFontBold attribute to 1.

Refer to the code given below:

{
"chart": {
"captionFont": "Arial",
"captionFontSize": "18",
"captionFontColor": "#993300",
"captionFontBold": "1"
}
}

To customize the font color, size, formatting, etc., of the subcaption, use the following attributes:

• Set the subcaption font family using the subCaptionFont attribute.

• Set the subcaption font color in hex code using the subCaptionFontColor attribute.

• Set the subcaption font size (between 0 and 72) using the subCaptionFontSize attribute.

• Set subcaption font to bold by setting the value of the subCaptionFontBold attribute to 1.

Refer to the code given below:

{
"chart": {
"subcaptionFont": "Arial",
"subcaptionFontSize": "14",
"subcaptionFontColor": "#993300",
"subcaptionFontBold": "0"
}
}

The chart with customized caption and subcaption looks like as shown below:

## Configure Caption Alignment

Use the following attributes to configure caption alignment:

• Specify the horizontal alignment of the caption using the captionAlignment attribute, which accepts the values of left, center (default), and right.

• Display the caption at the top of the chart by setting the value of the captionOnTop attribute to 1.

• Align the caption with the canvas area instead of the chart area, by setting the value of the alignCaptionWithCanvas attribute to 1.

• Configure the padding (in pixels) from either edge when the caption is not center aligned, using the captionHorizontalPadding attribute.

Refer to the code given below:

{
"chart": {
"alignCaptionWithCanvas": "1",