Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

FusionCharts Suite XT provides five chart color palettes. The palette theme configures colors of these chart elements - chart background and border, canvas border and background, fonts, div lines, tooltips, anchors and the legend.

This section talks about using predefined palettes.

Using predefined palettes

Palette 1 is the default chart palette. A chart with palette set as 1 looks as below:

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount", "numberPrefix": "$", "numberSuffix": "K", "palettecolors": "#008ee4", "useplotgradientcolor": "0", "showplotborder": "0", "showShadow": "0", "palette": "1" }, "data": [ { "label": "Q1", "value": "125" }, { "label": "Q2", "value": "257" }, { "label": "Q3", "value": "173" }, { "label": "Q4", "value": "182" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount",
        "numberPrefix": "$",
        "numberSuffix": "K",
        "palettecolors": "#008ee4",
        "useplotgradientcolor": "0",
        "showplotborder": "0",
        "showShadow": "0",
        "palette": "1"
    },
    "data": [
        {
            "label": "Q1",
            "value": "125"
        },
        {
            "label": "Q2",
            "value": "257"
        },
        {
            "label": "Q3",
            "value": "173"
        },
        {
            "label": "Q4",
            "value": "182"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "palettecolors": "#008ee4",
            "useplotgradientcolor": "0",
            "showplotborder": "0",
            "showShadow": "0",
            //Setting palette to 1
            "palette": "1"
        },
        "data": [{
            "label": "Q1",
            "value": "125"
        }, {
            "label": "Q2",
            "value": "257"
        }, {
            "label": "Q3",
            "value": "173"
        }, {
            "label": "Q4",
            "value": "182"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Shown below is the same chart with the other four predefined palettes applied to it:

palette set as 2

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount", "numberPrefix": "$", "numberSuffix": "K", "palettecolors": "#008ee4", "useplotgradientcolor": "0", "showplotborder": "0", "showShadow": "0", "palette": "2" }, "data": [ { "label": "Q1", "value": "125" }, { "label": "Q2", "value": "257" }, { "label": "Q3", "value": "173" }, { "label": "Q4", "value": "182" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount",
        "numberPrefix": "$",
        "numberSuffix": "K",
        "palettecolors": "#008ee4",
        "useplotgradientcolor": "0",
        "showplotborder": "0",
        "showShadow": "0",
        "palette": "2"
    },
    "data": [
        {
            "label": "Q1",
            "value": "125"
        },
        {
            "label": "Q2",
            "value": "257"
        },
        {
            "label": "Q3",
            "value": "173"
        },
        {
            "label": "Q4",
            "value": "182"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "palettecolors": "#008ee4",
            "useplotgradientcolor": "0",
            "showplotborder": "0",
            "showShadow": "0",
            //Setting palette to 2
            "palette": "2"
        },
        "data": [{
            "label": "Q1",
            "value": "125"
        }, {
            "label": "Q2",
            "value": "257"
        }, {
            "label": "Q3",
            "value": "173"
        }, {
            "label": "Q4",
            "value": "182"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

palette set as 3

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount", "numberPrefix": "$", "numberSuffix": "K", "palettecolors": "#008ee4", "useplotgradientcolor": "0", "showplotborder": "0", "showShadow": "0", "palette": "3" }, "data": [ { "label": "Q1", "value": "125" }, { "label": "Q2", "value": "257" }, { "label": "Q3", "value": "173" }, { "label": "Q4", "value": "182" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount",
        "numberPrefix": "$",
        "numberSuffix": "K",
        "palettecolors": "#008ee4",
        "useplotgradientcolor": "0",
        "showplotborder": "0",
        "showShadow": "0",
        "palette": "3"
    },
    "data": [
        {
            "label": "Q1",
            "value": "125"
        },
        {
            "label": "Q2",
            "value": "257"
        },
        {
            "label": "Q3",
            "value": "173"
        },
        {
            "label": "Q4",
            "value": "182"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "palettecolors": "#008ee4",
            "useplotgradientcolor": "0",
            "showplotborder": "0",
            "showShadow": "0",
            //Setting palette to 3
            "palette": "3"
        },
        "data": [{
            "label": "Q1",
            "value": "125"
        }, {
            "label": "Q2",
            "value": "257"
        }, {
            "label": "Q3",
            "value": "173"
        }, {
            "label": "Q4",
            "value": "182"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

palette set as 4

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount", "numberPrefix": "$", "numberSuffix": "K", "palettecolors": "#008ee4", "useplotgradientcolor": "0", "showplotborder": "0", "showShadow": "0", "palette": "4" }, "data": [ { "label": "Q1", "value": "125" }, { "label": "Q2", "value": "257" }, { "label": "Q3", "value": "173" }, { "label": "Q4", "value": "182" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount",
        "numberPrefix": "$",
        "numberSuffix": "K",
        "palettecolors": "#008ee4",
        "useplotgradientcolor": "0",
        "showplotborder": "0",
        "showShadow": "0",
        "palette": "4"
    },
    "data": [
        {
            "label": "Q1",
            "value": "125"
        },
        {
            "label": "Q2",
            "value": "257"
        },
        {
            "label": "Q3",
            "value": "173"
        },
        {
            "label": "Q4",
            "value": "182"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "palettecolors": "#008ee4",
            "useplotgradientcolor": "0",
            "showplotborder": "0",
            "showShadow": "0",
            //Setting palette to 4
            "palette": "4"
        },
        "data": [{
            "label": "Q1",
            "value": "125"
        }, {
            "label": "Q2",
            "value": "257"
        }, {
            "label": "Q3",
            "value": "173"
        }, {
            "label": "Q4",
            "value": "182"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

palette set as 5

FusionCharts will load here..
{ "chart": { "caption": "Quarterly Revenue", "subcaption": "Last year", "xaxisname": "Quarter", "yaxisname": "Amount", "numberPrefix": "$", "numberSuffix": "K", "palettecolors": "#008ee4", "useplotgradientcolor": "0", "showplotborder": "0", "showShadow": "0", "palette": "5" }, "data": [ { "label": "Q1", "value": "125" }, { "label": "Q2", "value": "257" }, { "label": "Q3", "value": "173" }, { "label": "Q4", "value": "182" } ] }
{
    "chart": {
        "caption": "Quarterly Revenue",
        "subcaption": "Last year",
        "xaxisname": "Quarter",
        "yaxisname": "Amount",
        "numberPrefix": "$",
        "numberSuffix": "K",
        "palettecolors": "#008ee4",
        "useplotgradientcolor": "0",
        "showplotborder": "0",
        "showShadow": "0",
        "palette": "5"
    },
    "data": [
        {
            "label": "Q1",
            "value": "125"
        },
        {
            "label": "Q2",
            "value": "257"
        },
        {
            "label": "Q3",
            "value": "173"
        },
        {
            "label": "Q4",
            "value": "182"
        }
    ]
}
<html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
  FusionCharts.ready(function(){
    var fusioncharts = new FusionCharts({
    type: 'column2d',
    renderAt: 'chart-container',
    width: '400',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
            "caption": "Quarterly Revenue",
            "subcaption": "Last year",
            "xaxisname": "Quarter",
            "yaxisname": "Amount",
            "numberPrefix": "$",
            "numberSuffix": "K",
            "palettecolors": "#008ee4",
            "useplotgradientcolor": "0",
            "showplotborder": "0",
            "showShadow": "0",
            //Setting palette to 5
            "palette": "5"
        },
        "data": [{
            "label": "Q1",
            "value": "125"
        }, {
            "label": "Q2",
            "value": "257"
        }, {
            "label": "Q3",
            "value": "173"
        }, {
            "label": "Q4",
            "value": "182"
        }]
    }
}
);
    fusioncharts.render();
});
</script>
</head>
<body>
  <div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>

Given below is a brief description of the palette attribute:

Attribute Description

palette

It is used to specify the color palette number for the chart. It can have values between 1 and 5.

The data structure for using the other four predefined palettes remains the same with only palette attribute changed from 1 through 5.

Top