Loading
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:
Given below is the attribute used to display anchors in a chart:
| Attribute | Description |
|---|---|
|
Set this to |
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"
}
]
}Customizing anchor properties
A line chart with customized anchors looks as below:
Given below are the attributes used to customize the appearance of anchors:
| Attribute | Description |
|---|---|
|
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 |
|
It specifies the radius of the anchors(in pixels). |
|
It specifies the hex code of the color that will be used to render the anchor borders e.g. |
|
It specifies the thickness of the anchor borders(in pixels). |
|
It specifies the hex code for the color that will be applied to the anchor background e.g. |
|
Sets the transparency of anchor background. Can take values from |
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"
}
]
}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:
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"
}
]
}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:
Given below are the attributes used to configure external images in anchors:
| Attribute Name | Description |
|---|---|
|
Specifies the URL of the image to be used in place of the anchor. |
|
Sets the transparency of anchor image. Can take values from |
|
It is used to specify the scale of the externally loaded image. |
|
It is used to specify the scale of the externally loaded image while the user hovers the mouse pointer over the anchor. |
|
Defines the transparency of anchor image when the user hovers the mouse pointer over the anchor. Can take values from |
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"
}
]
}