Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts


Integrating With Your Stack



FusionCharts JQuery Plugin can be downloaded from here.

The FusionCharts jQuery plugin enables you to bind FusionCharts events using the jQuery bind/on methods. The event handler needs to be attached to an HTML element containing the FusionCharts object.

In this section, you will be shown how you can work with the FusionCharts events using the jQuery plugin.

A chart with the dataPlotClick event configured using the jQuery plugin looks like this:

FusionCharts will load here..
Click on a data plot to trigger event

When a data plot on the chart is clicked, dataPlotClick event is fired and the event listener displays the corresponding message in the div container.

The code snippet for this chart is shown below:

    type: 'column2d',
    width: '450',
    height: '300',
    dataFormat: 'json',
    dataSource: {
        "chart": {
        "data": [

// Display text when data plot is clicked
$('#chart-container').bind('fusionchartsdataplotclick', function(event, args) {
    $('#messageView').text("You selected " + args.toolText);


The complete list of events exposed by FusionCharts is available here. These events can be used with the FusionCharts jQuery plugin by prefixing them with the text “fusioncharts” and using the lowercase representation of the event name. For example, the beforeRender event will be named as fusionchartsbeforerender. This is done to avoid conflict with the existing jQuery events that might have the same names. The parameters passed to the event handler function, however, are the same.

There! You have now seen how you can work with events using the jQuery plugin.