FusionCharts Logo
v3.12.1
Demos
Beginner's Guide
Charts / Gauges / Maps Guide
Customizing Charts
API
Integrating With Your Stack
Help

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

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

FusionCharts will load here..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Averages",
            "subcaption": "Last week",
            "xaxisname": "Day",
            "yaxisname": "Satisfaction (In %)",
            "numbersuffix": "%",
            "showvalues": "0",
            //Customizing anchor properties
            "drawAnchors": "1",
            //Theme
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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.

Customizing anchor properties

A line chart with customized anchors looks as below:

FusionCharts will load here..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Averages",
            "subcaption": "Last week",
            "xaxisname": "Day",
            "yaxisname": "Satisfaction (In %)",
            "numbersuffix": "%",
            "showvalues": "0",
            //Anchor Cosmetics
            "anchorRadius": "6",
            "anchorBorderThickness": "2",
            "anchorBorderColor": "#127fcb",
            "anchorSides": "3",
            "anchorBgColor": "#d3f7ff",
            //Theme
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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).

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..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    id: 'myChart',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Customer Satisfaction Averages",
            "subcaption": "Last week",
            "xaxisname": "Day",
            "yaxisname": "Satisfaction (In %)",
            "numbersuffix": "%",
            "showvalues": "0",
            //Anchor Cosmatics
            "anchorRadius": "6",
            "anchorBorderThickness": "2",
            //Theme
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

To configure anchors for a specific data point, use the anchor customization attributes within the data object.

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..
{ "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"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'line',
    renderAt: 'chart-container',
    width: '500',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "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
            "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"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

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).
Top