Customizing Charts - Customizing Legend Font Cosmetics.

Created using FusionCharts Suite XT - www.fusioncharts.com

by Vishalika

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Customizing Legend font cosmetics.

Attributes: 
    # legendItemFont
    # legendItemFontSize
    # legendItemFontColor
    # legendItemFontBold
    # legendItemHoverFontColor

    # legendCaptionFont
    # legendCaptionFontSize
    # legendCaptionFontColor
    # legendCaptionAlignment
    # legendCaptionBold 
    
    Legend items font hover color
    # legendItemHiddenColor" 
-->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'mscolumn2d',
        renderAt: 'chart-container',
        width: '600',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Comparison of Quarterly Revenue",
                "subCaption": "Last year Vs This year",
                "xAxisname": "Time Range",
                "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": "9:00 \u00a0\u00a0\u00a0 10:00"
                }, {
                    "label": "11:00 \u00a0\u00a0\u00a0  12:00"
                }, {
                    "label": "12:00 \u00a0\u00a0\u00a0 1:00"
                }, {
                    "label": "2:00 \u00a0\u00a0\u00a0 3:00"
                }]
            }],
            "dataset": [{
                "seriesname": "Last Year",
                "data": [{
                    "value": "10000"
                }, {
                    "value": "11500"
               ...