Configuring Chart Parameters > Chart Canvas

Canvas refers to the area in which the chart is plotted.

Properties of the Canvas can be altered from the 'Canvas' panel, you can further enhance the appearance of the Canvas by setting different appearance styles for the Canvas. Styles can be configured from the 'Styles' panel which is launched by clicking the 'Canvas Style Definition' button in the 'Canvas' panel.

FusionCharts for Dreamweaver allows you to change the following Canvas properties;

• Background Color
• Background Alpha
• Border Color

Changing Background Color of the Canvas

The 'Color Type' button lets you choose the nature of the canvas color. It could either be a 'Simple Color' (solid color) or a 'Gradient'. By default the 'Color Type' is set to "Simple Color".

To set a solid color for your chart canvas, set the 'Color Type' to 'Simple' and then change the canvasBgColor by using the color picker to select a desired color for your chart's canvas. You can also specify a hex color code in the adjoining text field.

Setting a gradient color for the chart canvas is also an easy process. To set a gradient color for your chart canvas - change the 'Color Type' to gradient. Notice, that a 'Gradient Editor' is now displayed on the panel. The 'GradientEditor' has two slider icons attached to it. You can add more slider icons to the 'Gradient Editor' by clicking anywhere along the base of the 'Gradient Editor'. If you have added a lot of slider icons and you wish to remove some of them simply select any one of the sliders with your mouse and drag it beyond the edge of the 'Gradient Editor', the slider icon will automatically disappear.

The following steps will help you learn how to create a rich gradient color for your chart's canvas. We'll show you how to create a gradient with three colors. However, you can have as many colors as you want for your gradient.

• By default there are two slider icons attached to the base of the 'Gradient Editor'. Create another one by clicking anywhere near the center of the 'Gradient Editor'.
• Select the slider which is on the extreme left and then select a color of your choice from the color picker. Repeat the same process with the other two sliders and choose a different color for each of them.
• Notice, that there are now three swatches of colors in the 'Gradient Editor'. You can manipulate the range of each color by dragging its slider icon in either direction.

FusionCharts for Dreamweaver also facilitates customization of 'canvasBgAngle' which may range from 0 to 360. The following examples shows how the appearance of a chart can be enhance by manipulating its 'canvasBgAngle'.

Changing the Alpha of the Canvas

Alpha refers to transparency which ranges from 0 to 100. Alpha set to 0 will render the canvas completely transparent while alpha value of 100 will render the canvas opaque. You can create great visual effects by manipulating the alpha of the canvas.

Modifying the Canvas Border

FusionCharts allow you to customize the color of the Canvas Border, you can specify a color for the border of the canvas either by using the color picker or by providing a hex color code in the adjoining text field.

The following are some chart specific properties associated with the Canvas that are applicable to 3D charts only:

• canvasBgDepth: This refers to the illusion of depth that is displayed by the canvas in context of the data-plot. The value of the canvasBgDepth is specified in pixels.
• canvasBaseColor: Canvas Base is the base on which the Data Plot is positioned, the color of the canvas base can be set using the color picker or by providing a hex color code.
• CanvasBaseDepth: This parameter is used for configuring the depth of the canvas base, the value for this parameter has to be specified in pixels.

Advanced Parameters

If the 'Show advanced options' check box is selected - some additional parameters will be displayed in the 'Canvas' panel.

Following advanced parameters are available in the 'Canvas' panel:

• canvasBorderAlpha: Using this parameter you can set the alpha of the canvas border
• canvasBorderThickness: This parameter allows you to set the thickness of the canvas border.