Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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 will 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:

{ "chart": { "caption": "Customer Satisfaction Averages", "subcaption": "Last week", "xaxisname": "Day", "yaxisname": "Satisfaction (In %)", "numbersuffix": "%", "showvalues": "0", "drawAnchors": "1", "theme": "fint" }, "data": [ { "label": "Mon", "value": "22.5" }, { "label": "Tue", "value": "42.4" }, { "label": "Wed", "value": "28.2" }, { "label": "Thu", "value": "22.8" }, { "label": "Fri", "value": "39.2" }, { "label": "Sat", "value": "66.45" } ] }
{
    "chart": {
        "caption": "Customer Satisfaction Averages",
        "subcaption": "Last week",
        "xaxisname": "Day",
        "yaxisname": "Satisfaction (In %)",
        "numbersuffix": "%",
        "showvalues": "0",
        "drawAnchors": "1",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Mon",
            "value": "22.5"
        },
        {
            "label": "Tue",
            "value": "42.4"
        },
        {
            "label": "Wed",
            "value": "28.2"
        },
        {
            "label": "Thu",
            "value": "22.8"
        },
        {
            "label": "Fri",
            "value": "39.2"
        },
        {
            "label": "Sat",
            "value": "66.45"
        }
    ]
}

Customizing anchor properties

A line chart with customized anchors looks as below:

FusionCharts will 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:

{ "chart": { "caption": "Customer Satisfaction Averages", "subcaption": "Last week", "xaxisname": "Day", "yaxisname": "Satisfaction (In %)", "numbersuffix": "%", "showvalues": "0", "anchorRadius": "6", "anchorBorderThickness": "2", "anchorBorderColor": "#127fcb", "anchorSides": "3", "anchorBgColor": "#d3f7ff", "theme": "fint" }, "data": [ { "label": "Mon", "value": "22.5" }, { "label": "Tue", "value": "42.4" }, { "label": "Wed", "value": "28.2" }, { "label": "Thu", "value": "22.8" }, { "label": "Fri", "value": "39.2" }, { "label": "Sat", "value": "66.45" } ] }
{
    "chart": {
        "caption": "Customer Satisfaction Averages",
        "subcaption": "Last week",
        "xaxisname": "Day",
        "yaxisname": "Satisfaction (In %)",
        "numbersuffix": "%",
        "showvalues": "0",
        "anchorRadius": "6",
        "anchorBorderThickness": "2",
        "anchorBorderColor": "#127fcb",
        "anchorSides": "3",
        "anchorBgColor": "#d3f7ff",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Mon",
            "value": "22.5"
        },
        {
            "label": "Tue",
            "value": "42.4"
        },
        {
            "label": "Wed",
            "value": "28.2"
        },
        {
            "label": "Thu",
            "value": "22.8"
        },
        {
            "label": "Fri",
            "value": "39.2"
        },
        {
            "label": "Sat",
            "value": "66.45"
        }
    ]
}

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 will 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:

{ "chart": { "caption": "Customer Satisfaction Averages", "subcaption": "Last week", "xaxisname": "Day", "yaxisname": "Satisfaction (In %)", "numbersuffix": "%", "showvalues": "0", "anchorRadius": "6", "anchorBorderThickness": "2", "theme": "fint" }, "data": [ { "label": "Mon", "value": "22.5", "anchorBorderColor": "#cc3333", "anchorBgColor": "#ff9900" }, { "label": "Tue", "value": "42.4", "anchorBorderColor": "#33cc00", "anchorBgColor": "#66FF33" }, { "label": "Wed", "value": "28.2", "anchorBorderColor": "#cc3333", "anchorBgColor": "#ff9900" }, { "label": "Thu", "value": "22.8", "anchorBorderColor": "#cc3333", "anchorBgColor": "#ff9900" }, { "label": "Fri", "value": "39.2", "anchorBorderColor": "#33cc00", "anchorBgColor": "#66FF33" }, { "label": "Sat", "value": "66.45", "anchorBorderColor": "#33cc00", "anchorBgColor": "#66FF33" } ] }
{
    "chart": {
        "caption": "Customer Satisfaction Averages",
        "subcaption": "Last week",
        "xaxisname": "Day",
        "yaxisname": "Satisfaction (In %)",
        "numbersuffix": "%",
        "showvalues": "0",
        "anchorRadius": "6",
        "anchorBorderThickness": "2",
        "theme": "fint"
    },
    "data": [
        {
            "label": "Mon",
            "value": "22.5",
            "anchorBorderColor": "#cc3333",
            "anchorBgColor": "#ff9900"
        },
        {
            "label": "Tue",
            "value": "42.4",
            "anchorBorderColor": "#33cc00",
            "anchorBgColor": "#66FF33"
        },
        {
            "label": "Wed",
            "value": "28.2",
            "anchorBorderColor": "#cc3333",
            "anchorBgColor": "#ff9900"
        },
        {
            "label": "Thu",
            "value": "22.8",
            "anchorBorderColor": "#cc3333",
            "anchorBgColor": "#ff9900"
        },
        {
            "label": "Fri",
            "value": "39.2",
            "anchorBorderColor": "#33cc00",
            "anchorBgColor": "#66FF33"
        },
        {
            "label": "Sat",
            "value": "66.45",
            "anchorBorderColor": "#33cc00",
            "anchorBgColor": "#66FF33"
        }
    ]
}

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 will 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:

{ "chart": { "caption": "Top Employees", "subcaption": "Last six months", "xAxisName": "Month", "yAxisName": "Rating", "yaxisminvalue": "0", "yaxismaxvalue": "10", "yAxisValuesPadding": "15", "valuePosition": "below", "numDivlines": "5", "lineAlpha": "1", "anchorAlpha": "100", "theme": "fint" }, "data": [ { "label": "July", "value": "7.8", "displayValue": "John, 7.8", "tooltext": "July : John, 7.8", "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/1.png" }, { "label": "August", "value": "6.9", "displayValue": "Mac, 6.9", "tooltext": "August : Mac, 6.9", "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/2.png" }, { "label": "September", "value": "8", "displayValue": "Phillips, 8", "tooltext": "September : Phillips, 8", "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/3.png" }, { "label": "October", "value": "7.5", "displayValue": "Terrin, 7.5", "tooltext": "October : Terrin, 7.5", "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/4.png" }, { "label": "November", "value": "7.7", "displayValue": "Tom, 7.7", "tooltext": "November : Tom, 7.7", "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/5.png" }, { "label": "December", "value": "6.7", "displayValue": "Martha, 6.7", "tooltext": "December : Martha, 6.7", "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/6.png" } ] }
{
    "chart": {
        "caption": "Top Employees",
        "subcaption": "Last six months",
        "xAxisName": "Month",
        "yAxisName": "Rating",
        "yaxisminvalue": "0",
        "yaxismaxvalue": "10",
        "yAxisValuesPadding": "15",
        "valuePosition": "below",
        "numDivlines": "5",
        "lineAlpha": "1",
        "anchorAlpha": "100",
        "theme": "fint"
    },
    "data": [
        {
            "label": "July",
            "value": "7.8",
            "displayValue": "John, 7.8",
            "tooltext": "July : John, 7.8",
            "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/1.png"
        },
        {
            "label": "August",
            "value": "6.9",
            "displayValue": "Mac, 6.9",
            "tooltext": "August : Mac, 6.9",
            "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/2.png"
        },
        {
            "label": "September",
            "value": "8",
            "displayValue": "Phillips, 8",
            "tooltext": "September : Phillips, 8",
            "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/3.png"
        },
        {
            "label": "October",
            "value": "7.5",
            "displayValue": "Terrin, 7.5",
            "tooltext": "October : Terrin, 7.5",
            "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/4.png"
        },
        {
            "label": "November",
            "value": "7.7",
            "displayValue": "Tom, 7.7",
            "tooltext": "November : Tom, 7.7",
            "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/5.png"
        },
        {
            "label": "December",
            "value": "6.7",
            "displayValue": "Martha, 6.7",
            "tooltext": "December : Martha, 6.7",
            "anchorImageUrl": "http://static.fusioncharts.com/sampledata/userimages/6.png"
        }
    ]
}
Top