A lightweight EmberJS component which provides bindings for FusionCharts JavaScript Charting Library

The Ember-FusionCharts wrapper framework lets you easily include FusionCharts in your EmberJS projects and add interactive charts to your ambitious Ember application.

Download Plugin View it on Github


  • Adds a chart using just one single component.
  • Auto-updates the chart object when the data source is modified.
  • Adds a chart from a JSON URL, from a XML URL, or using Props Binding.
  • Allows you to enable interactivity between Javascript charts.
  • Offers advanced control by giving you access to the complete FusionCharts object (containing the chart configuration).


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

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


Step 1: Install the ember-fusioncharts wrapper framework

In the terminal run the following command:

    $ ember install ember-fusioncharts

Step 2: Import fusioncharts library

In your ember-cli-build.js build file, import fusioncharts library

/* eslint-env node */
'use strict';

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
    let app = new EmberApp(defaults, {
    // Add options here

    // Import fusioncharts library

    // Use `app.import` to add additional libraries to the generated
    // output files.
    // If you need to use different assets in different
    // environments, specify an object as the first parameter. That
    // object's keys should be the environment name and the values
    // should be the asset to use in that environment.
    // If the library that you are including contains AMD or ES6
    // modules that you would like to import into your application
    // please specify an object with the list of modules as keys
    // along with the exports of each module as its value.

    return app.toTree();

Step 3: Create a simple component

Create a simple component (e.g. chart-viewer, also you can use it anywhere in your application) to show your interactive charts, run:

    $ ember generate component chart-viewer
Write your chart logic in chart-viewer.js file:

import Component from '@ember/component';
const myDataSource = {
    "chart": {
        "caption": "Harry's SuperMart",
        "subCaption": "Top 5 stores in last month by revenue",
        "numberPrefix": "$",
        "theme": "fint"
    "data": [
            "label": "Bakersfield Central",
            "value": "880000"
            "label": "Garden Groove harbour",
            "value": "730000"
            "label": "Los Angeles Topanga",
            "value": "590000"
            "label": "Compton-Rancho Dom",
            "value": "520000"
            "label": "Daly City Serramonte",
            "value": "330000"

export default Component.extend({
    title: 'Ember FusionCharts Sample',
    width: 600,
    height: 400,
    type: 'column2d',
    dataFormat: 'json',
    dataSource: myDataSource
fusioncharts-xt component in your chart-viewer.hbs template to show your charts:

<h1>{{ title }}</h1>

And your chart should display when you load the page.


Ember-FusionCharts is an open-source resouorce, distributed under the terms of the MIT/X11 License. You will still need to include FusionCharts in your page, as this project provides no direct functionality. You can download a free evaluation version here.

FusionCharts is free for non-commercial and personal use. To use in a commercial environment, please purchase a FusionCharts license.