Sample Display Properties:
<customObjects>
<objectGroup xPos="100" yPos="100" >
<object type="circle" xPos="110" yPos="20" radius="50" fillColor="FF5904" />
</objectGroup>
</customObjects>
As you can see in the XML above, you need to set the type attribute of the <object> element to circle to create a circle custom object. The various properties of the circle custom object can be customized using the following attributes of the <object> element:
You can define the properties of the circle like radius, start angle, end angle, background & border color etc.
Attribute Name | Type | Range | Description |
radius | Number | This attribute sets the radius of the circle. | |
startAngle | Number | 0-360 | This attribute is used to set the starting angle for the circle. For example, if you need to draw a semi-circle, then set startAngle="0" and endAngle="180". Default value: 0 |
endAngle | Number | 0-360 | This attribute is used to set the ending angle for the circle. Default value: 360 |
xPos | Number | This attribute sets the x-position of the circle with respect to the object group. | |
yPos | Number | This attribute sets the y-position of the circle with respect to the object group. |
The circle custom shape can have either a solid background (one color fill) or it supports multi-color gradient fills. If you intend to specify just a single color for the background, you can simple use the attribute below:
Attribute Name | Type | Range | Description |
fillColor | Color | Hex Color | This attribute sets the background color of the rectangle custom object. Default value: FF5904 |
fillAlpha | Number | 0-100 | This attribute would help you set the transparency of the solid fill. |
Now, if you need gradient fill, you'll need to specify the following attributes:
Attribute Name | Type | Range | Description |
fillAsGradient | Boolean | 0/1 | First of all, you need to set this attribute as 1. By default, this attribute is set to 0, indicating a solid fill. |
fillColor | Color | Comma separated values | When using gradient fills, you'll need to list all your colors, which you intend to show in the gradient, separated by commas. For example, if you wanted to change our above rectangle from solid orange fill to a gradient orange fill (that ends in white), we'll use the following fillColor="FF5904,FFFFFF" where FFFFFF is the color code for white. |
fillAlpha | Number | 0-100 | In this attribute, you need to define the alpha of each color that you're specifying in the gradient (fillColor). Like the colors, the alpha too needs to be separated by commas. Example: When this attribute is defined as fillAlpha="80,50" and is coupled with fillColor="FF5904,FFFFFF", the color FF5904 would be shown in 80% alpha while the color FFFFFF would be shown in 50% alpha. Please note that when you use this attribute, you need to make sure that number of colors defined in fillColor is same as the number of alpha defined in fillAlpha. For example, if you are creating a gradient fill by specifying 2 colors, then you need to specify 2 alphas for this attribute as well, or else you may get unexpected results. If you need 100% alpha for all the colors, it's best not to use this attribute at all. |
fillRatio | Number | Comma separated values | This attribute sets the ratio of the space the colors would occupy in the gradient fill. Example: When this attribute is defined as fillRatio="80,20" and is coupled with fillColor="FF5904,FFFFFF", the color FF5904 would occupy 80% of the gradient fill while the color FFFFFF would get 20%. As in fillAlpha, there needs to be as many ratio values separated by commas as there are colors in fillColor. Also, the sum of all the ratio values should be 100. By default, FusionCharts splits all the colors in the list proportionally i.e. if you have 2 colors and don't define this attribute, then both the colors would have 50% fill ratio. |
fillPattern | String | Radial or Linear | This attribute sets whether the gradient fill of the custom object would be radial or linear in nature. Default value: Linear |
fillDegree | Number | 0-360 | This attribute is useful when the fill pattern is set as LINEAR and we want to get the gradient at an angle. Normally, if you fill a custom shape with gradient, you'll see that the gradient fill effect runs from left to right. If you wish to change that angle, you can specify the gradient angle (in degrees) in this attribute. |
Attribute Name | Type | Range | Description |
borderColor | Color | Hex Code | This attribute sets the border color of the rectangle custom object. Default value: 000000 |
borderThickness | In Pixels | In Pixels | This attribute sets the border thickness of the rectangle custom object. Default value: 1 |
showBorder | Boolean | 0/1 | This attribute sets whether the border for the rectangle custom object would be displayed or not. Default value: 0 |