FusionCharts Knowledge Base

What are Interactive Legends?

Starting FusionCharts v3.2, the legend is interactive. That is, when you click on each legend icon, it hides the data set corresponding to that item.

In the example below, profit legend icon is clicked:

And this result in the chart as under.

Note how the Profit icon has also been converted to gray-scale. To show the area back, you click on this icon again.

Furthermore, FusionCharts v3.2 shows up Plot-type icons for Legend. Like, Column-type legend icon for Multi-series Column charts, Pie-type icon for Pie/Doughnut charts, etc.

In Multi-Series/ Combination charts, the Legend shows up automatically. whereas, To enable legend for a pie/doughnut chart, you need to use the following attribute:showLegend='1'

Legend Customization Options

FusionCharts offers a lot of customization options for legend - both functional and cosmetic. Let's quickly take a look at them in the tabular format.

Attribute Name Description
showLegend Whether to show legend on the chart.
legendCaption You can add a caption for the entire legend by setting the same here.
legendIconScale Scaling of legend icon is possible starting FusionCharts v3.2. This attribute lets you control the size of legend icon.
legendPosition The legend can be plotted at two positions on the chart - below the chart (BOTTOM) and on the RIGHT side of the chart.
legendBgColor Background color for the legend.
legendBgAlpha Background alpha for the legend.
legendBorderColor Border Color for the legend.
legendBorderThickness Border thickness for the legend. 
legendBorderAlpha Border alpha for the legend.
legendShadow Whether to show a shadow for legend.
legendAllowDrag The legend can be made drag-able by setting this attribute to 1. End viewers of the chart can drag the legend around on the chart. 
legendScrollBgColor If you've too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the background color of the scroll bar.
legendScrollBarColor If you've too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the bar color of the scroll bar.
legendScrollBtnColor If you've too many items on the legend, a scroll bar shows up on the same. This attribute lets you configure the color of buttons of the scroll bar.
reverseLegend You can reverse the ordering of datasets in the legend by setting this attribute to 1.
interactiveLegend This attribute lets you interact with the legend in your chart. When you click a legend key, the dataplots associated with that series are eliminated from the chart. Re-clicking the key causes the dataplots to reappear.
legendNumColumns If your chart contains multiple series, the legend is displayed as a grid comprising of multiple legend keys. With the help of this attribute you can specify the number of columns that are to be displayed in the legend.
minimiseWrappingInLegend Whether to minimize legend item text wrapping.

Related Articles

No related articles were found.


No attachments were found.

Visitor Comments

Article Details

Last Updated
12th of October, 2010

Would you like to...

Print this page  Print this page

Email this page  Email this page

Post a comment  Post a comment

 Subscribe me

Subscribe me  Add to favorites

Remove Highlighting Remove Highlighting

Edit this Article

Quick Edit

User Opinions

33% thumbs up 66% thumbs down (3 votes)

How would you rate this answer?

Thank you for rating this answer.