Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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..

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

palette set as 2

FusionCharts will load here..

palette set as 3

FusionCharts will load here..

palette set as 4

FusionCharts will load here..

palette set as 5

FusionCharts will load here..

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 needed to apply chart palette - 1, is given below:

{ "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"
        }
    ]
}

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

Top