Choose an item Fonts

Fonts

Font properties include the font family, size, and color for the text rendered inside and outside the chart canvas.

Customize Base Font Group#

The base font group is used to customize the font properties for the text rendered on the chart itself. To customize the base fonts follow the steps given below:

  • Specify the font property of the text displayed on the chart using the baseFont attribute.

  • Set the size of the base font using the baseFontSize attribute.

  • Specify the hex code for the color of the base font using the baseFontColor attribute.

Refer to the code below:

{
  "chart": {
    "baseFont": "Verdana",
    "baseFontSize": "11",
    "baseFontColor": "#0066cc"
  }
}
Were you able to implement this?

The chart will look like as shown below:

Amount$0$544K$1.09M$1.63M$2.18M$2.72MQuarterQ1Q2Q3Q4Quarterly revenue for last year

Click here to edit the above chart.

Outside Canvas Base Font Group#

This is used to customize font properties for the text placed outside the chart canvas. To do so, follow the steps given below:

  • Specify the font property of the text displayed on the chart outside the canvas using the outCnvBaseFont attribute.

  • Set the size of the font outside the chart canvas using the outCnvBaseFontSize attribute.

  • Specify the hex code for the color of the font outside the chart canvas using the outCnvBaseFontColor attribute.

Refer to the code below:

{
  "chart": {
    "outCnvBaseFont": "Arial",
    "outCnvBaseFontSize": "11",
    "outCnvBaseFontColor": "#633563"
  }
}
Were you able to implement this?

The chart will look like as shown below:

Click here to edit the above chart.

Note that outCanvasBaseFont group overrides the setting of the baseFont group.