Border and Background

A chart's background refers to the whole area on which a chart is drawn. The background of the chart is enclosed by a chart border. The chart border is a rectangle around the chart background.

Border and Background

This article will show you how to configure your charts with respect to its border and background. It will explain a few attributes that control the behaviour of the chart border and background.

This section is divided into the following parts:

  • Customizing chart border

  • Customizing chart background

  • Using gradient fill for the background

  • Using an external image as the background

  • Customizing background image

Customizing chart borders

2D charts in FusionCharts Suite XT have a default border. 3D charts don't have a default border but you can include one.

A column 2D chart with a customized border looks as below:

FusionCharts should load here..

Given below is a brief description of the attributes used to customize chart border:

Attribute Name Description
showBorder It is used to specify whether a border should be shown around the chart. Setting this attribute to 1 (default for 2D charts) shows a border around the chart. Setting it to 0 (default for 3D charts) hides it.
borderColor It is used to specify the hex code of the color to be applied to the chart border. The hex code should be prefixed with the # character.
borderThickness It is used to specify the thickness of the chart border.
borderAlpha It is used to specify the transparency of the chart border. The value can range from 0 to 100 where 0 is completely transparent and 100 is completely opaque.

The data structure needed to customize the chart borders, using these attributes, is given below:

...

Customizing chart background

Background here refers to the complete area inside the chart border.

A column 2D chart with a customized background color looks as below:

FusionCharts should load here..

Below is the list of attributes that can be used to customize chart background:

Attribute Name Description
bgColor It is used to specify the hex code for the color to be applied to the chart background. The hex code should be prefixed with the # character.
bgAlpha It is used to set the transparency for the chart background.

The data structure required to customize the chart background is as shown below:

...

Using gradient fill for the background

When using a gradient fill for the background, you can configure three aspects:

  1. Set gradient transparency

  2. Set ratio of colour distribution

  3. Set the gradient angle.

A column 2D chart with a gradient fill used in the background looks as below:

FusionCharts should load here..

Below is the list of the attributes used to customize gradient fill for chart background:

Attribute Name Description
bgColor It is used to specify the hex code of all colors to be used for the gradient. The codes should be separated by a comma.
bgAlpha It is used to set the transparency for each color specified in the bgColor attribute. The values for alpha for individual colors should be separated by a comma. If the number of alpha value is less than the number of colors specified, the last alpha value is re-used for the remaining colors.
bgRatio It is used to specify the ratio of each color in the gradient. The sum of the ratio values specified using this attribute should equal to 100. If the number of ratio value is less than the total number of colors specified, the remaining colors are equally distributed in the unallotted area.

The data structure required to customize the chart background with a gradient fill is as shown below:

...

Using an external image as chart background

You can specify an external image (GIF, JPEG or PNG only) as the background of the chart.

Shown below is a chart with an external image used as its background:

FusionCharts should load here..

The attribute to use an external image as chart background is mentioned below:

Attribute Name Description
bgImage It is used to specify the URL of the image to be used for the background.

The data structure required to use an external image as the chart background is as shown below:

...

Customizing the background image

You can customize the external image rendered as the chart background. FusionCharts Suite XT lets you to:

  1. Specify the transparency level of the background image

  2. Specify a display mode

  3. Set the alignment of the image

  4. Set the scale of the image

A column 2D chart with a partially transparent background looks as below:

FusionCharts should load here..

Below is the list of attributes used to customize a chart image background:

Attribute Name Description
bgImage It is used to specify the URL of the image to be used for the background.
bgImageAlpha It is used to specify the transparency for the background image.
bgImageVAlign, bgImageHAlign These are used to align the image vertically and horizontally, respectively. Possible values for these attributes are top, middle and bottom.
bgImageScale It is used to increase or decrease the scale of the image. Possible values of this attribute lie between 0-300. When 300 is specified the image is 300% magnified, whereas 0 will reduce the image to an invisible entity. 100 will produce the image with actual or 100% size. Anything lower than 100 will reduce the size of the image.
bgImageDisplayMode It is used to specify the mode in which the background image is to be displayed. Possible values are stretch, tile, fit, fill, center and none.

Alignment attributes are ignored for center and stretch display modes and bgImageScale attribute works only for none, center and tile display modes.

The data structure required to customize the transparency of external image rendered as the chart background is as shown below:

...