Anchors and Lines

Each data point in a line/spline/area chart is represented by an anchor. Anchors help to identify the data point better in the chart. They also show a tooltip showing the data plot details when the mouse is hovered over them, and can be linked to other pages as well.

This article talks about:

  • Customizing anchor display

  • Customizing anchor properties

  • Customizing anchors for specific data points

  • Adding external images in anchors of line & spline charts

Customizing anchor display

The anchors and their corresponding tooltips are displayed by default. A line chart with anchors hidden looks as below:

FusionCharts should load here..

Given below is the attribute used to display anchors in a chart:

Attribute Description
drawAnchors Set this to 1(default) to show anchors or 0 to hide them.

The data structure used, in the chart above, to hide anchors is given below:

...

Customizing anchor properties

A line chart with customized anchors looks as below:

FusionCharts should load here..

Given below are the attributes used to customize the appearance of anchors:

Attribute Description
anchorSides It specifies the number of sides the anchor will have, depending on the shape of the anchor you want to render. This attribute takes values between 3 and 20.
anchorRadius It specifies the radius of the anchors(in pixels).
anchorBorderColor It specifies the hex code of the color that will be used to render the anchor borders e.g. #00ffaa.
anchorBorderThickness It specifies the thickness of the anchor borders(in pixels).
anchorBgColor It specifies the hex code for the color that will be applied to the anchor background e.g. #00ffaa.
anchorBgAlpha Sets the transparency of anchor background. Can take values from 0 (transparent) to 100 (opaque).

The data structure used, in the chart above, to customize anchors is as follows:

...

Customizing anchors for specific data points

FusionCharts Suite XT allows you to highlight a particular data point by customizing specific anchor points explicitly. To highlight a specific anchor, you need to customize the cosmetics for only that particular anchor. A line chart with anchors for specific data points customized looks as below:

FusionCharts should load here..

To configure anchors for a specific data point, use the anchor customization attributes within the data object. The data structure used, in the chart above, to customize anchors for specific data points is as follows:

...

Adding external images in anchors of Line & Spline charts

External images are now supported in anchor of line and area type charts. This allows you to use different images for each anchor, and lets you highlight special values.

A line chart with external images in the anchors looks as below:

FusionCharts should load here..

Given below are the attributes used to configure external images in anchors:

Attribute Name Description
anchorImageUrl Specifies the URL of the image to be used in place of the anchor.
anchorImageAlpha Sets the transparency of anchor image. Can take values from 0 (transparent) to 100 (opaque).
anchorImageScale It is used to specify the scale of the externally loaded image.
anchorImageHoverScale It is used to specify the scale of the externally loaded image while the user hovers the mouse pointer over the anchor.
anchorImageHoverAlpha Defines the transparency of anchor image when the user hovers the mouse pointer over the anchor. Can take values from 0 (transparent) to 100 (opaque).

The data structure used, in the chart above, to add external images in anchors is given below:

...