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. #00ffaa

anchorBorderThickness

Border thickness of the anchor in pixels

anchorBgColor

Background color of the anchor in hex code, e.g #00ffaa

anchorBgAlpha

Background alpha of the anchor ranging from 0 (transparent) to 100 (opaque)

anchorAlpha

Overall alpha of the anchor, affecting both fill and border, and ranging from 0 (transparent) to 100 (opaque)

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.

FusionCharts will load here..

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": "fint" }, "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" } ] } ] }
{
    "chart": {
        "caption": "Comparison of Quarterly Revenue",
        "subCaption": "Harry's SuperMart",
        "xAxisname": "Quarter",
        "yAxisName": "Amount",
        "numberPrefix": "$",
        "theme": "fint"
    },
    "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.

FusionCharts will load here..

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": "fint", "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" } ] }
{
    "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Monthly revenue for last year",
        "xAxisName": "Month",
        "yAxisName": "Amount",
        "numberPrefix": "$",
        "theme": "fint",
        "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.

FusionCharts will load here..

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": "fint", "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" } ] }
{
    "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Monthly revenue for last year",
        "xAxisName": "Month",
        "yAxisName": "Amount",
        "numberPrefix": "$",
        "theme": "fint",
        "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"
        }
    ]
}
Was this article helpful to you ?