Highlight Specific Data Points
To help user visualize data, it is often necessary for you to highlight one or more data points in a chart. There are a number of ways that you can take to make a data point stand out and draw attention. One of the most common way that we will discuss here is about tweaking the cosmetic properties of the data plot.
Data plots can be broadly classified into two groups.
- Plots that are graphically well defined and independent of other plots, e.g. individual columns in a Column chart
- Plots that are interlinked and lack independent existence, e.g. lines between two successive points in a Line chart
The well defined and independent data plots have in general 3 configurable properties that can be used to highlight a data point. The properties are detailed below:
| Attribute Name | Description |
|---|---|
color |
Fill color of the data plot in hex code, e.g. #00ffaa |
alpha |
Fill alpha of the data plot ranging from 0 (transparent) to 100 (opaque) |
dashed |
Border of the plot fill is dashed for the value of 1 |
In charts like line, spline and area, the visualisation is more about the change in data. Data plots do not have any individual / independent existence or to be precise, they are missing! FusionCharts provides anchors to place on data points in these charts. Since, an anchor is graphically independent, it can be used to highlight a specific data point.
You can configure the anchors using the attributes detailed below.
| Attribute Name | Description |
|---|---|
anchorSides
|
Number of sides of the polygon acting as the anchor, accepting any positive integer greater than 2
|
anchorRadius
|
Radius of the polygon acting as the anchor in pixels |
anchorBorderColor
|
Border color of the anchor in hex code, e.g. |
anchorBorderThickness
|
Border thickness of the anchor in pixels |
anchorBgColor
|
Background color of the anchor in hex code, e.g |
anchorBgAlpha
|
Background alpha of the anchor ranging from |
anchorAlpha
|
Overall alpha of the anchor, affecting both fill and border, and ranging from |
Some of the most prominent ways of highlighting data points using FusionCharts are:
- Changing the color of an individual data point
- Highlighting the data point by changing its alpha and using dashed border
- Changing anchor properties in charts like line and area
Changing the Color of an Individual Data Point
A plot with a distinctly different color stands out of a set of uniformly colored data plots. This is the easiest and most prominent way to highlight a data plot. But, this technique fails in case different colors are used on different data plots.
The following live chart highlights a column plot in the MSColumn2D chart.
Inspect the data structure of the sample shown below on how to configure the attributes at data point object level in the data JSONs.
{
"chart": {
"caption": "Comparison of Quarterly Revenue",
"subCaption": "Harry's SuperMart",
"xAxisname": "Quarter",
"yAxisName": "Amount",
"numberPrefix": "$",
"theme": "fusion"
},
"categories": [
{
"category": [
{
"label": "Q1"
},
{
"label": "Q2"
},
{
"label": "Q3"
},
{
"label": "Q4"
}
]
}
],
"dataset": [
{
"seriesname": "Previous Year",
"data": [
{
"value": "10000",
"color": "#999900"
},
{
"value": "11500"
},
{
"value": "12500"
},
{
"value": "15000"
}
]
},
{
"seriesname": "Current Year",
"data": [
{
"value": "25400"
},
{
"value": "29800"
},
{
"value": "21800"
},
{
"value": "26800"
}
]
}
]
}Highlighting the Data Point by changing its Alpha and using Dashed Border
This is a more subtle way to highlight a data plot, where you may not prefer to colorize the plot with a distinctly different color. Change the plot opacity and you get a color derivative of the original color. If thats not enough as a highlighter, make the border dashed to add weight and help the plot stand out in the show.
The following live chart highlights a column plot in the Column2D chart.
Inspect the data structure of the sample shown below on how to configure the attributes at data point object level in the data JSONs.
{
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Monthly revenue for last year",
"xAxisName": "Month",
"yAxisName": "Amount",
"numberPrefix": "$",
"theme": "fusion",
"rotateValues": "1",
"showPlotBorder": "1"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000",
"alpha": "20",
"dashed": "1"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}Changing Anchor Properties in charts like Line and Area
Anchors represent data points in charts that lack data plots to represent numerical data. Charts plotting line or area or both (as in combination charts) fall in this category. Spline charts fall in this category either. In a nutshell, if you have line, spline or area plots in any chart and you need to highlight data points on any of these, use anchors if not yet and highlight the required data plot.
The following live chart highlights a line anchor in the Line chart.
Inspect the data structure of the sample shown below on how to configure the attributes at data point object level in the data JSONs.
{
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Monthly revenue for last year",
"xAxisName": "Month",
"yAxisName": "Amount",
"numberPrefix": "$",
"theme": "fusion",
"rotateValues": "1"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000",
"anchorRadius": "6",
"anchorBorderColor": "0372AB",
"anchorBgColor": "E1f5ff"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}