FusionCharts - Configuring colors for application to different data series in JavaScript Chart

Created using FusionCharts Suite XT - www.fusioncharts.com

by Rohit Boggarapu

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>
<!-- 
    FusionCharts Suite XT allows you to specify a comma separated list of colors for use in different data series (or in case of single series charts, different data plots). The colors from this list are selected in a round-robin way for each data series present in your actual data.
    Attribute:
    # palettecolors - Comma separate list of colors for application to data
    series / data plots.
 -->
 <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var salesChart = new FusionCharts({
        type: 'mscolumn2d',
        renderAt: 'chart-container',
        width: '850',
        height: '550',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Quarterly Sales - By Employee",
                "subcaption": "Last year",
                "captionFontSize": "22",
                                "subCaptionFontSize": "18",
                "xaxisname": "Employee",
                "yaxisname": "Amount (in USD)",
                "numberprefix": "$",
                "showValues" : "0",
                //Pallatte Colors
                "paletteColors" : "#EED17F,#97CBE7,#074868,#B0D67A,#2C560A,#DD9D82",
                //Theme
                "baseFont": "Open Sans",
                "baseFontSize": 14,
                "theme" : "fint",
                 "toolTipBgColor": "#000",
        "toolTipPadding": "10",
        "toolTipBorderRadius": "3",
        "toolTipBorderThickness": "1",
        "toolTipBorderColor": "#ccc",
        "toolTipBgAlpha": "70",
        "plotToolText": "<div style='color:#FFF; font-size: 13px; letter-spacing: 1px;'>$label($seriesName): $dataValue</div>"
                
            },
            "categories": [
                {
                    "category": [
                        { "label": "Mark" }, 
                        { "label": "John" }, 
                        { "label": "Symonds" }, 
                        { "label": "Peter" }
                    ]
                }
            ],
            "dataset": [
                {
                    "seriesname": "Q1",
                    "data": [
                        { "value": "27400" }, 
                        { "value": "29800" }, 
                        { "value": "25800" }, 
                        { "value": "26800" }
                    ]
                }, 
                {
                    "seriesname": "Q2",
                   ...