Chart Palettes
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"
}
]
}<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"
}
]
}<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"
}
]
}<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"
}
]
}<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"
}
]
}<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 |
|---|---|
|
It is used to specify the color palette number for the chart. It can have values between |
The data structure for using the other four predefined palettes remains the same with only palette attribute changed from 1 through 5.