Background refers to the entire background of the chart.

The background color of the chart is fully customizable. You can use either a solid or a gradient fill using the attributes below:

Example:

<chart bgColor='999999,FFFFFF' bgAlpha='50' ...>

You can also have a border around the chart. By default, the border is displayed in 2D charts. In 3D charts by default the border is not displayed. To display the border you need to set the showBorder attribute to '1'.

Shown below is a chart with a border around the chart.

The following attributes let you control the cosmetic properties of the chart border:

Example:

<chart ... showBorder='1' borderColor='FF0000' borderThickness='2' borderAlpha='50' ..> 

When using a gradient fill for the background, you can set the alpha and ratio in which colors are to be distributed, and the angle at which you want the gradient to be. The following attributes help you do the same:

You can also specify an external image (GIF,JPEG or PNG only) or an SWF file as the background of the chart. You can also specify a display mode like stretch, tile etc. and the vertical/horizontal alignment of the image. The scale of the image can also be customized. A chart with a background image is shown below:

In the above code, we're:

• Loading a background image pizza.jpg by setting it as the value of the bgImage attribute. If your image file is in a different location, you'll need to specify the relative path. Note that due to security restrictions, your image file has to reside on the same sub-domain as that of the chart SWF File and a relative path to the same has to be specified.
• Setting canvas background of the chart as transparent to get a full view of the background image
• Defining styles for formatting of other chart elements

Simple and effective - isn't it?

In the above code, we have added the attribute bgImageAlpha='30'. The chart will look as under:

You can also increase or decrease the magnification of the background image. To customize the magnification of the background image the attribute bgImageScale is used. The value of this attribute can be anything between 0-300. The default value of the attribute is 100. Any value less than 100 will reduce the size of the background image and any value more than 100 will increase the size of the background image.

The chart for the above code will look as under:

See it live!

You can set the position of the background image on the chart according to your choice by altering the vertical and horizontal alignments of the background image. The two attributes used to set the alignments are bgImageVAlign (top, middle, bottom) and bgImageHAlign (left, middle, right). The default value of these two attributes are bgImageVAlign='top' and bgImageHALign='left'. By default, the background image will appear on the top-left position of the chart.

All possible combinations of vertical and horizontal alignments of the background image are given below:

A background image can also be displayed using one of the various modes of display. The display mode can be changed using the bgImageDisplayMode attribute. The acceptable values of this attribute are none, center, stretch, tile, fit and fill. By default, the value of the attribute is set to none. Examples with different display modes are shown below:

If you wish to set your chart background as transparent in the HTML page, you need to follow these steps:

1. You need to configure chart's data as following:
   • If you are feeding data in XML format, set <chart ... bgAlpha='0,0' ...>
   • If you are feeding data in JSON format, set "chart":{ ... "bgalpha":"0,0", ...}
2. In the HTML code that embeds the chart, set myChart.setTransparent(true) as under:

<div id="chartdiv" align="center">The  chart will appear within this DIV. This text will be replaced by the  chart.</div>
    <script type="text/javascript">
        var myChart = new FusionCharts("../FusionCharts/Column3D.swf", "myChartId", "900", "300", "0", "1");
        myChart.setXMLUrl("Data.xml");
        myChart.setTransparent(true);
        myChart.render("chartdiv");
    </script>
</div>

Shown below is an example, where a 2D Column Chart has been embedded in an HTML page with background image. Also, the canvas has been made transparent to highlight the effect.

You can also apply effects to background using Styles. Shown below is an example where we've applied Bevel effect to the background:

Data for this can be listed as under:

<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
    <set label='Quarter 1' value='420500' />
    <set label='Quarter 2' value='295400' />
    <set label='Quarter 3' value='523400' /> 
    <set label='Quarter 4' value='465400' />
    <styles>
       <definition>
          <style name='myBevel' type='Bevel'/>
       </definition>
       <application>
          <apply toObject='Background' styles='myBevel'  />
       </application>
    </styles>
</chart>

{
  "chart":{
    "caption":"Quarterly Sales Summary",
    "subcaption":"Figures in $",
    "xaxisname":"Quarter",
    "yaxisname":"Sales"
  },
  "data":[{
      "label":"Quarter 1",
      "value":"420500"
    },
    {
      "label":"Quarter 2",
      "value":"295400"
    },
    {
      "label":"Quarter 3",
      "value":"523400"
    },
    {
      "label":"Quarter 4",
      "value":"465400"
    }
  ],
  "styles": {
    "definition": [
      {
        "name": "myBevel",
        "type": "Bevel"
      }
    ],
    "application": [
      {
        "toobject": "Background",
        "styles": "myBevel"
      }
    ]
  }
}

Using Styles, you can also apply animation to background. For example, the data below creates a fade-in effect for the background.

<chart caption='Quarterly Sales Summary' subcaption='Figures in $' xAxisName='Quarter' yAxisName='Sales'>
   <set label='Quarter 1' value='420500' />
   <set label='Quarter 2' value='295400' />
   <set label='Quarter 3' value='523400' /> 
   <set label='Quarter 4' value='465400' />
   <styles>
      <definition>
          <style name='myBgAnim' type='Animation' param='_alpha' start='0' duration='1'/>
      </definition>
      <application>
          <apply toObject='Background' styles='myBgAnim' />
      </application>
   </styles>
</chart>

{
  "chart":{
    "caption":"Quarterly Sales Summary",
    "subcaption":"Figures in $",
    "xaxisname":"Quarter",
    "yaxisname":"Sales"
  },
  "data":[{
      "label":"Quarter 1",
      "value":"420500"
    },
    {
      "label":"Quarter 2",
      "value":"295400"
    },
    {
      "label":"Quarter 3",
      "value":"523400"
    },
    {
      "label":"Quarter 4",
      "value":"465400"
    }
  ],
  "styles": {
    "definition": [
      {
        "name": "myBgAnim",
        "type": "Animation",
        "param": "_alpha",
        "start": "0",
        "duration": "1"
      }
    ],
    "application": [
      {
        "toobject": "Background",
        "styles": "myBgAnim"
      }
    ]
  }
}