In multi-series / combination charts, the series name of each data-set displays in the legend of the chart. This helps you relate a data plot to its series name using its color. The legend does not appear for single-series charts because there is only one series in the chart.
Notice the legend below the chart, which helps identify the series name.
The following XML for the above chart is:
<chart caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue' showValues='0' numberPrefix='$'> <categories>
<category label='Jan' />
<category label='Feb' />
<category label='Mar' />
<category label='Apr' />
<category label='May' />
<category label='Jun' />
</categories> <dataset seriesName='2006'>
<set value='27400' />
<set value='29800' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
</dataset> <dataset seriesName='2005'>
<set value='10000'/>
<set value='11500'/>
<set value='12500'/>
<set value='15000'/>
<set value='11000' />
<set value='9800' />
</dataset> </chart>
The order of items in legend can be reversed. To do so, set:
<chart reverseLegend='1' ...>
The legend can be placed in 2 positions: RIGHT and BOTTOM. It gets placed below the canvas by default. To place it to the right of the chart canvas, set legendPosition='RIGHT'.
<chart legendPosition='RIGHT'...>
The legend can be hidden as well. To do this set, showLegend='0'.
<chart showLegend='0'...>
The appearence of the legend can be customized using the following attributes:
Attribute Name | Range | Description |
---|---|---|
legendBgColor | Hex Code | Background color for the legend. |
legendBgAlpha | 0-100 | Background alpha for the legend. |
legendBorderColor | Hex Code | Border Color for the legend. |
legendBorderThickness | In Pixels | Border thickness for the legend. |
legendBorderAlpha | 0-100 | Border alpha for the legend. |
legendShadow | 0/1 | Whether to show a shadow for legend. |
legendScrollBgColor | Hex Code | 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 | Hex Code | 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 | Hex Code | 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. |
Using Styles, the font properties of the legend can be customized.
<chart caption='Business Results 2005 v 2006' xAxisName='Month' yAxisName='Revenue' showValues='0' numberPrefix='$'> <categories>
<category label='Jan' />
<category label='Feb' />
<category label='Mar' />
<category label='Apr' />
<category label='May' />
<category label='Jun' />
</categories> <dataset seriesName='2006'>
<set value='27400' />
<set value='29800' />
<set value='25800' />
<set value='26800' />
<set value='29600' />
<set value='32600' />
</dataset> <dataset seriesName='2005'>
<set value='10000'/>
<set value='11500'/>
<set value='12500'/>
<set value='15000'/>
<set value='11000' />
<set value='9800' />
</dataset>
<styles>
<definition>
<style name='myLegendFont' type='font' size='11' color='639ACE' bold='1' />
</definition>
<application>
<apply toObject='Legend' styles='myLegendFont' />
</application>
</styles>
</chart>
The above XML would yield a legend that looks similar to the one shown below:
To read more on Styles, please go through "For Web Developers > FusionCharts and STYLES" section.
The legend can be animated using Styles. Here, we will give a fade-in effect to the legend. The following XML would cause to provide a fade-in effect:
<chart ... > .....
<styles>
<definition>
<style name='myAnim' type='animation' param='_alpha' start='0' duration='1'/>
</definition>
<application>
<apply toObject='Legend' styles='myAnim' />
</application>
</styles>
</chart>