jQuery Helper For FusionCharts

Easy to use jQuery helper for adding interactive charts and graphs to your website.

We understand not everybody loves coding in vanilla JavaScript, and that’s why we have developed this easy to use helper for one of the most famous JavaScript library - jQuery. You can use our jQuery helper with our core library to add interactive JavaScript charts to your web and mobile applications with only a few lines of code. You will have access to all the rich features of FusionCharts like events, macros, zooming, panning, annotations, image-exporting etc. Explore the examples below to learn more about our helper and you can even start making charts today with the quick start guide at the bottom of the page!

Download Plugin View it on Github


  • Works seamlessly across PCs (including IE6/7/8), 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.


Simply open up a github issue with your question/bug report/suggestion.

Along with jQuery helper, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files


Step 1: Include fusioncharts.jqueryplugin.js

In your HTML, include fusioncharts.jqueryplugin.js after all other scripts:

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

Step 2: Select a DOM using jQuery selector inside your module as follows


Step 3: Use the insertFusionCharts method

(function () {
        type: "column2d",
        width: "500",
        height: "300",
        dataFormat: "json",
        dataSource: {
            "chart": {
                "caption": "Monthly revenue",
                "subCaption": "Last Year",
                "xAxisName": "Month",
                "yAxisName": "Revenues",
                //Making the chart export enabled in various formats
                "exportEnabled" :"1",
                "numberPrefix": "$",
                "theme": "fint"

            "data": [{
                "label": "Jan",
                    "value": "420000"
            }, {
                "label": "Feb",
                    "value": "810000"
            }, {
                "label": "Mar",
                    "value": "720000"
            }, {
                "label": "Apr",
                    "value": "550000"
            }, {
                "label": "May",
                    "value": "910000"
            }, {
                "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"


And your chart should display when you load the page.


jQuery-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include core FusionCharts library in your page. This jQuery helper project provides no direct functionality. Evaluation version can be downloaded from this page. You will still need to purchase a FusionCharts license for using it in commercial environment (FusionCharts is free for non-commercial and personal use).