Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts


Integrating With Your Stack


FusionCharts Suite XT gives you an option to render your charts as thumbnail versions, which is useful when space is a limitation. It may be required at times to show only thumbnail versions of charts. These thumbnails when clicked will expand to render a chart.

Shown below is an example with chart thumbnails that enlarge on click.

FusionCharts will load here..

Chart thumbnails are characterised by the following:

Only plots are rendered while all other chart elements are hidden

  • Interactivity is disabled
  • Animation is disabled
  • Generic features are disabled

In a nutshell, a chart thumbnail is like a static image with an associated link accessible via click/touch. Lets discuss the characteristic features and how to implement them using FusionCharts.

In this section, you will learn how to:

Render Plots shedding all other Chart elements

A chart is composed of a host of elements. The general elements and how to hide them is tabulated as below.

Chart elements Attributes and values Description


caption: ""
subcaption: ""

Hide caption and subcaption


showCanvasBorder: "0"
numDivLines: "0"
showAxisLimitGridLines: "0"

Hide canvas along with grid lines


bgAlpha: "0"
showBorder: "0"

Possibly hide chart background and border


showXAxisLine: "0"
showYAxisLine: "0"

Do not show axes

Axis Names

xAxisName: ""
yAxisName: ""

Hide axis names

Axis labels

showLabels: "0"
showYAxisValues: "0"

Hide x-axis labels and y-axis values

Data values

showValues: "0"

Hide data value labels with the plots


showLegend: "0"

Hide legend


showShadow: "0"
showPlotBorder: "0"
drawAnchors: "0"

Remove extra cosmetics from the plots like border and shadow. You may not render anchors in line / area charts.


logoURL: ""

Remove link to logo image if any

Disable all Charting Interactivities

Charts have varying interactive feature. However some of these interactivities are common across the suite. The following table summarise the common ones.

Attribute Value Description



Disable tooltext on plot hover



Deactivate plot hover effects



Remove link associated to chart if any

Static Presentation of Chart

An image type presentation makes it necessary to be visually static. Some of the required measures in this context are given below.

Attribute Value Description



Disable initial animation

The JavaScript code to show the above effect is given below:

FusionCharts.ready(function() {
    // write a function which creates a thumbnail of the required dimensions but turning off some of the properties which are not required in a thumbnail, for some other charts there might be a few more additional properties that need to be turned off.
    var createThumbNail = function(chartId, width, height, divId) {
        // we clone the chart first and then set new width and height
        var chartRef = FusionCharts(chartId),
            clonedChart = chartRef.clone({
                "width": width,
                "height": height
        // turn off properties which are not required
            "showValues": "0",
            "showLabels": "0",
            "animation": "0",
            "exportEnabled": "0",
            "showTooltip": "0",
            "showHoverEffect": "0",
            "showYAxisValues": "0",
            "caption": "",
            "subCaption": "",
            "xAxisName": "",
            "yAxisName": "",
            "showXAxisLine": "0",
            "showYAxisLine": "0",
            "numDivLines": "0",
            "enableSlicing": "0",
            "enableRotation": "0"
        // listen for the chartClick event to render the detailed chart
        clonedChart.addEventListener('chartClick', function() {
        // create the thumbnail
        clonedChart.render(divId, 'append');
    // since data is common for all three charts, we store it in a common variable
    var chartData = {
        "chart": {
            "caption": "Harry's SuperMart",
            "subCaption": "Monthly revenue for last year",
            "xAxisName": "Month",
            "yAxisName": "Amount",
            "numberPrefix": "$",
            "theme": "fint",
            "rotateValues": "1",
            "exportEnabled": "1"
        "data": [{
            "label": "Jan",
            "value": "420000"
        }, {
            "label": "Feb",
            "value": "810000"
        }, {
            "label": "Mar",
            "value": "720000"
        }, {
            "label": "Apr",
            "value": "550000"
        }, {
            "label": "May",
            "value": "910000",
            "anchorRadius": "10",
            "anchorBorderColor": "0372AB",
            "anchorBgColor": "E1f5ff"
        }, {
            "label": "Jun",
            "value": "510000"
        }, {
            "label": "Jul",
            "value": "680000"
        }, {
            "label": "Aug",
            "value": "620000"
        }, {
            "label": "Sep",
            "value": "610000"
        }, {
            "label": "Oct",
            "value": "490000"
        }, {
            "label": "Nov",
            "value": "900000"
        }, {
            "label": "Dec",
            "value": "730000"
    // create all the three chart instances of column, pie, bar
    var revenueChartColumn = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        id: 'revenue-chart-column',
        dataSource: chartData
    var revenueChartPie = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        id: 'revenue-chart-pie',
        dataSource: chartData
    var revenueChartBar = new FusionCharts({
        type: 'bar2d',
        renderAt: 'chart-container',
        width: '400',
        height: '300',
        dataFormat: 'json',
        id: 'revenue-chart-bar',
        dataSource: chartData
    // create thumbnails for all the three charts
    createThumbNail('revenue-chart-column', 100, 100, 'thumbnail-column');
    createThumbNail('revenue-chart-pie', 100, 100, 'thumbnail-pie');
    createThumbNail('revenue-chart-bar', 100, 100, 'thumbnail-bar');
    // render column chart by default