Legend

A legend is a chart element that is used to display the series name of each dataset in multi-series/combination charts. Legends are not applicable to single series charts. Legends are used to correlate a data plot to its series name using its color.

In the following image, the legend rendered below the x-axis helps to identify the data plots corresponding to a series name.

Showing/hiding the corresponding data series when a legend item is clicked

FusionCharts Suite XT supports legend interactivity. One of the features that comes under legend interactivity is being able to show/hide the data plots belonging to a data series by clicking the corresponding legend icon.

In the live chart shown below, when the legend icon for Last Year is clicked, all data plots in blue, showing the quarterly revenue for the last year, are hidden.

Highlighting the corresponding data series when a legend text is hovered over

Starting FusionCharts Suite XT v3.10.0, FusionCharts has introduced a new legend interactivity feature. Now, every time the mouse pointer is hovered over a legend text, the corresponding data plots are highlighted by decreasing the opacity of the data plots belonging to the other data series.

For example, in the chart shown below, when the mouse pointer is hovered over the legend text This Year, the data plots in blue (corresponding to Last Year) fadeout and the data plots in green (corresponding to This Year) are highlighted.

Given below is a brief description of the attribute used to enable this feature:

Attribute Name

Description

plotHighlightEffect

Sets the highlight effect for data plots when the mouse pointer is hovered over a legend item. When the mouse pointer is hovered over a legend text and plotHighlightEffect attribute is set to fadeout, it causes the data plots belonging to the other data series to fadeout, by reducing their opacity.

Customizing the highlight effect

Instead of just reducing the opacity of the data plots that don’t correspond to the hovered over legend text, you can customize a different effect.

Given below are the attributes used to draw a custom legend icon shape:

Attribute Name

Description

drawCustomLegendIcon

Sets whether drawing a custom legend icon will be enabled. Setting this attribute to 1 will enable the feature, setting it to 0 (default) will disable it. All legend icon customization attributes work only if this feature is enabled.

legendIconBorderColor

Sets the hex color code for the border of the legend icon. By default, it is assigned the data plot border color.

legendIconBgColor

Sets the hex color code for the background of the legend icon. By default, it is assigned the data plot fill color.

{"chart":{"caption":"Letters Used in a Novel","formatnumberscale":"0","showBorder":"0","showLegend":"1","theme":"fint","showPercentValues":"1","showPercentInToolTip":"0","legendPosition":"right","legendCaption":"Alphabet Used: ","legendScrollBgColor":"#cccccc","legendScrollBarColor":"#999999"},"data":[{"label":"A","value":"91852"},{"label":"B","value":"51852"},{"label":"C","value":"88168"},{"label":"D","value":"73897"},{"label":"E","value":"93933"},{"label":"F","value":"19289"},{"label":"G","value":"79623"},{"label":"H","value":"48262"},{"label":"I","value":"29162"},{"label":"J","value":"96878"},{"label":"K","value":"81241"},{"label":"L","value":"40652","issliced":"1"},{"label":"M","value":"37581","issliced":"1"},{"label":"N","value":"2882"},{"label":"O","value":"746"},{"label":"P","value":"7155"},{"label":"Q","value":"12072"},{"label":"R","value":"45608"},{"label":"S","value":"72570"},{"label":"T","value":"44799"},{"label":"U","value":"71887"},{"label":"V","value":"78170"},{"label":"W","value":"94345"},{"label":"X","value":"5434"},{"label":"Y","value":"34355"},{"label":"Z","value":"2323"}]}

<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(){varfusioncharts=newFusionCharts({type:'pie2d',renderAt:'chart-container',width:'500',height:'400',dataFormat:'json',dataSource:{"chart":{"caption":"Letters Used in a Novel","formatnumberscale":"0","showBorder":"0","showLegend":"1","theme":"fint","showPercentValues":"1","showPercentInToolTip":"0",//Setting legend to appear on right side"legendPosition":"right",//Caption for legend"legendCaption":"Alphabet Used: ",//Customization for legend scroll bar cosmetics"legendScrollBgColor":"#cccccc","legendScrollBarColor":"#999999"},"data":[{"label":"A","value":"91852"},{"label":"B","value":"51852"},{"label":"C","value":"88168"},{"label":"D","value":"73897"},{"label":"E","value":"93933"},{"label":"F","value":"19289"},{"label":"G","value":"79623"},{"label":"H","value":"48262"},{"label":"I","value":"29162"},{"label":"J","value":"96878"},{"label":"K","value":"81241"},{"label":"L","value":"40652","issliced":"1"},{"label":"M","value":"37581","issliced":"1"},{"label":"N","value":"2882"},{"label":"O","value":"746"},{"label":"P","value":"7155"},{"label":"Q","value":"12072"},{"label":"R","value":"45608"},{"label":"S","value":"72570"},{"label":"T","value":"44799"},{"label":"U","value":"71887"},{"label":"V","value":"78170"},{"label":"W","value":"94345"},{"label":"X","value":"5434"},{"label":"Y","value":"34355"},{"label":"Z","value":"2323"}]}});fusioncharts.render();});</script></head><body><divid="chart-container">FusionCharts XT will load here!</div></body></html>

The list of the attributes used to customize cosmetic properties of the legend scroll bar is mentioned below:

<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(){varfusioncharts=newFusionCharts({type:'mscolumn2d',renderAt:'chart-container',width:'500',height:'300',dataFormat:'json',dataSource:{"chart":{"caption":"Comparison of Quarterly Revenue","subCaption":"Last year Vs This year","xAxisname":"Quarter","yAxisName":"Revenue (In USD)","numberPrefix":"$","theme":"fint",//Cosmetics for legend"legendBgColor":"#CCCCCC","legendBgAlpha":"20","legendBorderColor":"#666666","legendBorderThickness":"1","legendBorderAlpha":"40","legendShadow":"1",//Reverse the order of items in legend"reverseLegend":"1"},"categories":[{"category":[{"label":"Q1"},{"label":"Q2"},{"label":"Q3"},{"label":"Q4"}]}],"dataset":[{"seriesname":"Last Year","data":[{"value":"10000"},{"value":"11500"},{"value":"12500"},{"value":"15000"}]},{"seriesname":"This Year","data":[{"value":"25400"},{"value":"29800"},{"value":"21800"},{"value":"26800"}]}]}});fusioncharts.render();});</script></head><body><divid="chart-container">FusionCharts XT will load here!</div></body></html>

The attribute to reverse legend order is mentioned below:

Attribute Name

Description

reverseLegend

You can reverse the ordering of datasets in the legend by setting this attribute to 1. This is set to 0 by default.

<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(){varfusioncharts=newFusionCharts({type:'mscolumn2d',renderAt:'chart-container',width:'500',height:'300',dataFormat:'json',dataSource:{"chart":{"caption":"Comparison of Quarterly Revenue","subCaption":"Last year Vs This year","xAxisname":"Quarter","yAxisName":"Amount (In USD)","numberPrefix":"$","theme":"fint",//Set legend to appear at right side of chart"legendPosition":"right",//Set a text caption for legend"legendCaption":"Which year?","legendCaptionBold":"1","legendCaptionFont":"Arial","legendCaptionFontSize":"14","legendCaptionFontColor":"#333333",//Configuration for legend font"legendItemFontBold":"0","legendItemFont":"Arial","legendItemFontSize":"11","legendItemFontColor":"#666666","legendItemHoverFontColor":"#000000","legendCaptionAlignment":"left",//Color of hidden legend item"legendItemHiddenColor":"#e8e8e8"},"categories":[{"category":[{"label":"Q1"},{"label":"Q2"},{"label":"Q3"},{"label":"Q4"}]}],"dataset":[{"seriesname":"Last Year","data":[{"value":"10000"},{"value":"11500"},{"value":"12500"},{"value":"15000"}]},{"seriesname":"This Year","data":[{"value":"25400"},{"value":"29800"},{"value":"21800"},{"value":"26800"}]}]}});fusioncharts.render();});</script></head><body><divid="chart-container">FusionCharts XT will load here!</div></body></html>

Given below is the list of attributes used to customize the legend font cosmetics:

Attribute Name

Description

legendItemFont

Sets legend item font, e.g. Arial

legendItemFontSize

Sets legend item font size, with values ranging from 0 to 72

legendItemFontColor

Sets legend item font color in hex code, e.g. #00ffaa

legendItemFontBold

Whether legend keys should be displayed in bold. Set 1 to make it bold or 0 to keep it normal.

legendItemHoverFontColor

Sets legend item font color on hover in hex code, e.g. #00ffaa

legendCaptionFont

Sets legend caption font, e.g. Arial

legendCaptionFontSize

Sets legend caption font size, with values ranging from 0 to 72

legendCaptionBold

Whether legend caption should be displayed in bold. Set 1 to make it bold or 0 to keep it normal.