jQuery Plugin for FusionCharts

An easy-to-use, lightweight jQuery component for the FusionCharts JavaScript Charting Library

Download Free Trial

Create Gantt, Line, Pie, Area and over 150 other charts for your web application. Using FusionCharts’ jQuery Plugin (compatible with both Bootstrap or jQuery UI) you can create charts which are responsive, interactive, and, support zooming, panning, APIs, animation, drill-downs, real-time updates, and even full exporting of charts & dashboards.

It also comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. All charts and dashboards made on FusionCharts’ jQuery Plugin are mobile first by default, and responsive across all devices. Further, all charts & graphs are tested and built for millions of data points, without any performance issues. Finally, the jQuery Plugin is completely open source and actively maintained by a team of dedicated developers.


  • Works seamlessly across PCs, Macs, iPads, iPhones, and Android devices.
  • Easy to update chart type, data, and individual cosmetic properties at run-time.
  • Insert, prepend, and append multiple charts in an existing chart container.
  • This jQuery helper for FusionCharts can be used to render charts from data contained in HTML tables.

Quick Demo

Simple chart
Quick demo

Quick Start

Step 1 : Setting up the FusionCharts jQuery Plugin

Include jquery.min.js, fusioncharts and jquery-fusioncharts in your project

<script type="text/javascript" src="path/to/local/jquery.min.js"></script>
<script type="text/javascript" src="path/to/local/fusioncharts.js"></script>
<script type="text/javascript" src="path/to/local/fusioncharts.jqueryplugin.js"></script>

Step 2 : Rendering charts using jQuery

For example, render a column chart

$('document').ready(function () {
        type: "column2d",
        width: "700",
        height: "400",
        dataFormat: "json",
        dataSource: {
            "chart": {
                "caption": "Countries With Most Oil Reserves [2017-18]",
                "subCaption": "In MMbbl = One Million barrels",
                "xAxisName": "Country",
                "yAxisName": "Reserves (MMbbl)",
                "numberSuffix": "K",
            "data": [{
                "label": "Venezuela",
                "value": "290"
            }, {
                "label": "Saudi",
                "value": "260"
            }, {
                "label": "Canada",
                "value": "180"
            }, {
                "label": "Iran",
                "value": "140"
            }, {
                "label": "Russia",
                "value": "115"
            }, {
                "label": "UAE",
                "value": "100"
            }, {
                "label": "US",
                "value": "30"
            }, {
                "label": "China",
                "value": "30"

Usage and integration of FusionTime

From `fusioncharts@3.13.3-sr.1`, You can visualize timeseries data easily with jquery. Learn more about FusionTime here.

var FusionCharts = require('fusioncharts');
var TimeSeries = require('fusioncharts/fusioncharts.timeseries');
var $ = require('jquery');
var jQueryFusionCharts = require('jquery-fusioncharts');


var jsonify = res => res.json();
var dataFetch = fetch(
var schemaFetch = fetch(

Promise.all([dataFetch, schemaFetch]).then(res => {
  const data = res[0];
  const schema = res[1];
  const fusionDataStore = new FusionCharts.DataStore();
  const fusionTable = fusionDataStore.createDataTable(data, schema);

  $('document').ready(function() {
      type: 'timeseries',
      width: '600',
      height: '400',
      dataFormat: 'json',
      dataSource: {
        data: fusionTable,
        caption: {
          text: 'Sales Analysis'
        subcaption: {
          text: 'Grocery'
        yAxis: [
            plot: {
              value: 'Grocery Sales Value',
              type: 'line'
            format: {
              prefix: '$'
            title: 'Sale Value'


FusionCharts jQuery plugin is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can download a free evaluation version. However, You will need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is free for non-commercial and personal use).