A legend is a chart element that displays the series name of each dataset in charts that plot data for multiple datasets. It helps to correlate a data plot to its series name with the color used to represent the data belonging to that series.
In this section, we will look at:
Legend interactivity
Legend events
Legend Interactivity
By default, the FusionCharts Suite XT legends are interactive - clicking a legend icon will show/hide the data plot it represents. Legends are shown for all charts that plot data for multiple datasets. FusionCharts Suite XT supports gradient legends and icon legends. Each legend type has its own interactive features.
Icon Legend
An icon legend is rendered with single-color icons for all datasets plotted on the chart.
A multi-series chart with an icon legend is shown below:
The above chart compares the quarterly revenue for the previous year and the current year - each year representing one dataset. When you click the Previous Year icon in the legend, all the data plots corresponding to this dataset are hidden.
For pie/doughnut charts, instead of showing/hiding data plots, legend interactivity will slice-in and slice-out data plots.
Gradient Legend
A gradient legend is a pane of blended colors derived from the definitions of the colorRange object. A linear scale is drawn with two drag-able pointers. Each color defined for a range blends with the next color, thus forming a gradient strip. Each point on the gradient scale represents a unique color and value. So, all different values in a chart will appear in unique colors as per the position on the gradient scale. The gradient legend is supported only for heat map charts.
A heat map chart with a gradient legend looks as shown below:
You can drag the pointers on a legend item to show/hide all the cells mapped within the color range that lies between the two pointers.
Legend Events
Given below is a brief description of all events associated with legends:
| Event Name | Description |
|---|---|
legendPointerDragStart |
This is event is fired when you start dragging the legend pointer in a gradient legend. |
legendPointerDragStop |
This is event is fired when you stop dragging the legend pointer in a gradient legend. |
legendRangeUpdated |
This event is fired when the gradient legend scale is updated. |
legendItemClicked |
This event is fired when you click individual legend items. |
legendItemRollover |
This event is fired when the mouse pointer is moved over any individual legend item. |
legendItemRollout |
This event is fired when the mouse is hovered out of the chart's legend item. |
For more information on how you can configure legends, click here.