Effects Tutorial
Overview
For better visual appearance AnyChart allows to apply effects almost to all objects and texts on the chart. There are several types of effects available and they can be combined together. In this tutorial all effects attributes and settings are described.
Effects are configured using <effects> subnode of <font> node for texts, and for other elements - of appropriate nodes (<background> or <major_grid>, for example).
You can disable all effects applied setting <effects enabled="false"/>
Typical effects node looks like:
01 |
<effects enabled="true"> |
02 |
<drop_shadow enabled="true" color="White" distance="6" /> |
03 |
<bevel enabled="true" /> |
04 |
</effects> |
Below all effects with their parameters are listed:
Drop Shadow
The DropShadow effect lets you add a drop shadow to display objects. The shadow algorithm is based on the same effect that the blur effect uses.
| Attribute | Description | Type |
|---|---|---|
| enabled | Sets whether effect is applied. | Boolean |
| distance | Sets shadow distance. | Number |
| angle | Sets shadow angle in decimal degrees. | Degrees |
| color | Sets shadow color. | Color |
| opacity | Sets shadow opacity. | Ratio |
| blur_x | Sets an amount of horizontal blur. | Number |
| blur_y | Sets an amount of vertical blur. | Number |
| strength | Sets shadow strength. | Number |
Bevel
The Bevel effect lets you add a bevel effect to display objects. A bevel effect gives objects such as flat columns or pies a three-dimensional look.
| Attribute | Description | Type |
|---|---|---|
| enabled | Sets whether effect is applied. | Boolean |
| distance | Sets bevel distance. | Number |
| angle | Sets bevel angle in decimal degrees. | Degrees |
| color | Sets bevel color. | Color |
| blur_x | Sets an amount of horizontal blur. | Number |
| blur_y | Sets an amount of vertical blur. | Number |
| strength | Sets bevel strength. | Number |
| shadow_color | Sets bevel shadow color. | Color |
| shadow_opacity | Sets bevel shadow opacity. | Ratio |
Glow
The Glow effect lets you apply a glow effect to display objects.
| Attribute | Description | Type |
|---|---|---|
| enabled | Sets whether effect is applied. | Boolean |
| color | Sets glow color. | Color |
| opacity | Sets glow opacity. | Ratio |
| blur_x | Sets an amount of horizontal blur. | Number |
| blur_y | Sets an amount of vertical blur. | Number |
| strength | Sets glow strength. | Number |
Blur
The Blur effect lets you apply a blur visual effect to a component. A Blur effect softens the details of an image.
| Attribute | Description | Type |
|---|---|---|
| enabled | Sets whether effect is applied. | Boolean |
| blur_x | Sets an amount of horizontal blur. | Number |
| blur_y | Sets an amount of vertical blur. | Number |
Inner Shadow
The InnerShadow effect lets you add an inner shadow to display objects. The shadow algorithm is based on the same effect that the blur effect uses.
| Attribute | Description | Type |
|---|---|---|
| enabled | Sets whether effect is applied. | Boolean |
| distance | Sets shadow distance. | Number |
| angle | Sets shadow angle in decimal degrees. | Degrees |
| color | Sets shadow color. | Color |
| opacity | Sets shadow opacity. | Ratio |
| blur_x | Sets an amount of horizontal blur. | Number |
| blur_y | Sets an amount of vertical blur. | Number |
| strength | Sets shadow strength. | Number |
Inner Glow
The InnerGlow effect lets you apply an inner glow effect to display objects.
| Attribute | Description | Type |
|---|---|---|
| enabled | Sets whether effect is applied. | Boolean |
| color | Sets glow color. | Color |
| opacity | Sets glow opacity. | Ratio |
| blur_x | Sets an amount of horizontal blur. | Number |
| blur_y | Sets an amount of vertical blur. | Number |
| strength | Sets glow strength. | Number |