Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts


Integrating With Your Stack




This callback is part of render function. When a function is passed as a parameter of render, it is executed when the rendering process is complete (along with renderComplete event.) This callback is executed with the scope of the instance of FusionCharts and as such the this variable within this function refers to the chart whose rendering process is complete.



: DOMElement


This parameter returns a reference to the container element within which the chart, gauge or map has been rendered.


// In this example, we are going to use the render callback
// function to activate a set of buttons that are needed only
// after a chart has been rendered (say, exporting the chart.)
FusionCharts.ready(function () {
    var chart = new FusionCharts({
        type: "Column2D",
        dataFormat: "jsonurl",
        dataSource: "sample-data-source.json",
        renderAt: "chart-container" // assuming an element with this id exists
    }).render(function () {
        // Assuming a disabled button with a specific id already exists.
        var button = document.getElementById("export-button");


Event listeners are used to tap into different stages of creating, updating, rendering or removing charts. A FusionCharts instance fires specific events based on what stage it is in. For example, the renderComplete event is fired each time a chart has finished rendering. You can listen to any such event using addEventListener or addEventListener and bind your own functions to that event.

These functions are known as “listeners” and are passed on to the second argument (listener) of the addEventListener and addEventListener functions.


The first parameter passed to the listener function is an event object that contains all information pertaining to a particular event.

: {

: string


The name of the event.


: number


A unique ID associated with the event. Internally it is an incrementing counter and as such can be indirectly used to verify the order in which the event was fired.


: FusionCharts


The instance of FusionCharts object that fired this event. Occassionally, for events that are not fired by individual charts, but are fired by the framework, will have the framework as this property.


: boolean


Shows whether an event’s propagation was cancelled or not. It is set to true when .stopPropagation() is called.


: function


Call this function from within a listener to prevent subsequent listeners from being executed.


: boolean


Shows whether the default action of this event has been prevented. It is set to true when .preventDefault() is called.


: function


Call this function to prevent the default action of an event. For example, for the event beforeResize, if you do .preventDefault(), the resize will never take place and instead resizeCancelled will be fired.


: boolean


Denotes whether a listener has been detached and no longer gets executed for any subsequent event of this particular type.


: function


Allows the listener to remove itself rather than being called externally by removeEventListener. This is very useful for one-time event listening or for special situations when the event is no longer required to be listened when the event has been fired with a specific condition.


: object


Every event has an argument object as second parameter that contains information relevant to that particular event.


The function passed as ready callback is executed when FusionCharts library is ready. Use ready to request executing of your callback function.



: FusionCharts or *


By default, the parameter passed to the callback function is the FusionCharts library class unless specified otherwise in the args parameter of ready

  • renderCallback
  • eventListener
  • readyCallback