There are a wide variety of front end Javascript frameworks available today and if you are building almost any type of web application (like dashboards) you probably need powerful charting components to visually represent data in a consumable way. In this article we are going to take a look at 6 different front end Javascript frameworks that are supported by FusionCharts and we are going to show you the source code for each to make a simple chart. You can look at the source code yourself and compare how much code it takes in each framework to make it happen. Additionally, you will see which framework is more readable and understandable to you.

Regardless of what Javascript framework you are using however you should be able to use it with FusionCharts to deliver a powerful user experience. Note: When making your comparisons some of the frameworks have the data embedded for the chart with the code so keep that in mind. Let’s get started!

React Component for FusionCharts

Add React charts and graphs like areabardonutlinemarimekkoradarstockcharts and 100+ other charts & 2000+ maps for your web or mobile application. Using FusionCharts’ React component you can create charts which are responsive, interactive, support zooming and 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’ React charts component 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.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import ReactFC from 'react-fusioncharts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);

const chartConfigs = {
  type: 'column2d',
  width: 600,
  height: 400,
  dataFormat: 'json',
  dataSource: {/* see data tab */ },
};

class Chart extends Component {
  render () {
    return <ReactFC {...chartConfigs} />;
  }
}

ReactDOM.render(
  <Chart />,
  document.getElementById('root'),
);

Learn more about visual stunning React charts.

Angular 2 Component for FusionCharts

Create piecolumnarealineradarmarimekko and over 150 other Angular charts for your web application. Using FusionCharts’ Angular Directive 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’ Angular Directive 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 Angular Directive is completely open source and actively maintained by a team of dedicated developers to ensure that all the latest versions of Angular JS are always supported.

// Setup needed in app.module.ts

import { NgModule, enableProdMode } from '@angular/core'
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { FusionChartsModule } from 'angular-fusioncharts';

// Load FusionCharts
import * as FusionCharts from 'fusioncharts';
// Load Charts module
import * as Charts from 'fusioncharts/fusioncharts.charts';
// Load fusion theme
import * as FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';

// Add dependencies to FusionChartsModule
FusionChartsModule.fcRoot(FusionCharts, Charts, FusionTheme)

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FusionChartsModule
  ],
  providers: [
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
// In app.component.ts
import { Component } from '@angular/core';

@Component({
    selector: 'app',
    templateUrl: 'app.component.html'
})
export class AppComponent { 
    dataSource: Object;
    chartConfig: Object;

    constructor() {
         this.chartConfig = {
            width: '700',
            height: '400',
            type: 'column2d',
            dataFormat: 'json',
        };

        this.dataSource = {
            "chart": {
              "caption": "Countries With Most Oil Reserves [2017-18]",
              "subCaption": "In MMbbl = One Million barrels",
              "xAxisName": "Country",
              "yAxisName": "Reserves (MMbbl)",
              "numberSuffix": "K",
              "theme": "fusion",
            },
            "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"
            }]
          };

    }
}
<!-- in app.component.html -->
<fusioncharts
    [chartConfig]=chartConfig
    [dataSource]=dataSource >
</fusioncharts>

Learn more about visual stunning Angular charts.

jQuery Plugin for FusionCharts

Create GanttLinePieArea 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.

/**
 * Assuming you have installed fusioncharts using npm
 * Following code snippet can be used
*/
var FusionCharts = require('fusioncharts');
var Charts = require('fusioncharts/fusioncharts.charts');
var FusionTheme = require('fusioncharts/themes/fusioncharts.theme.fusion');
var $ = require('jquery');
var jQueryFusionCharts = require('jquery-fusioncharts');

Charts(FusionCharts); // Resolve Charts as dependency for FusionCharts.
FusionTheme(FusionCharts);  // Resolve Fusion theme as dependency for FusionCharts
jQueryFusionCharts(FusionCharts); // Resolve FusionCharts as dependency for jqueryFusionCharts

$('document').ready(function () {
  $('#chart-container').insertFusionCharts({
    type: 'column2d',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource:  { /* see data tab */ }    
  });
});

/* 
NOTE: 
  * In case you downloaded fusioncharts in zipped format
  * var FusionCharts = require('/path/to/fusioncharts/fusioncharts.js');
  * var Charts = require('/path/to/fusioncharts/fusioncharts.charts.js');
  * var FusionTheme = require('/path/to/fusioncharts/fusioncharts.theme.fusion.js');
*/
<div id="chart-container">
    FusionCharts will render here
</div>

Learn more about visual stunning jQuery charts.

Vue Component for FusionCharts

Add Vue.Js charts and graphs like areabardonutlinemarimekkoradarstockcharts and 150+ other charts & 1000+ maps for your web application based on Vue. Using FusionCharts’ Vue component 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’ Vue component 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 Vue component is completely open source and actively maintained by a team of dedicated developers.

import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';

//import the theme
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'

// register VueFusionCharts component
Vue.use(VueFusionCharts, FusionCharts, Charts, FusionTheme)

// Copy datasource from 'Data' tab
var dataSource = /*{ "chart": {..}, ..}*/;

var app = new Vue({
    el: '#app',
    data: {
        width: '100%',
        height: '400',
        type: 'column2d',
        dataFormat: 'json',
        dataSource: dataSource
    }
});
<div id="app">
    <fusioncharts
    :type="type"
    :width="width"
    :height="height"
    :dataFormat="dataFormat"
    :dataSource="dataSource"
    ></fusioncharts>
</div>

Learn more about visual stunning Vue charts.

Ember Component for FusionCharts

Add Ember charts and graphs like areabardonutlinemarimekkoradarstockcharts and 150+ other charts & 1000+ maps for your web or mobile application. Using FusionCharts’ Ember component 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’ Ember charts component 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 Ember component is completely open source and actively maintained by a team of dedicated developers.

import Component from '@ember/component';

export default Component.extend({
    width: 600,
    height: 400,
    type: 'column2d',
    dataFormat: 'json',
    dataSource: {/* see data tab */}
});
/* eslint-env node */
'use strict';

const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');

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

    // Import FusionCharts library
    app.import('bower_components/fusioncharts/fusioncharts.js');
    app.import('bower_components/fusioncharts/fusioncharts.charts.js');        
    app.import('bower_components/fusioncharts/themes/fusioncharts.theme.fusion.js');    

    /*
      This build file specifies the options for the dummy test app of this
      addon, located in `/tests/dummy`
      This build file does *not* influence how the addon or the app using it
      behave. You most likely want to be modifying `./index.js` or app's build file
    */

    return app.toTree();
};
{{fusioncharts-xt
    width=width
    height=height
    type=type
    dataFormat=dataFormat
    dataSource=dataSource}}

Learn more about visual stunning Ember charts.

Svelte Component for FusionCharts

Add Svelte charts and graphs like areabardonutlinemarimekkoradarstockcharts and 100+ other charts & 2000+ maps for your web or mobile application. Using FusionCharts’ Svelte component you can create charts which are responsive, interactive, support zooming and 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’ Svelte charts component 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.

<script>
  import FusionCharts from 'fusioncharts';
  import Charts from 'fusioncharts/fusioncharts.charts';
  import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
  import SvelteFC, {fcRoot} from 'svelte-fusioncharts';
  import dataSource from './data.js';

  fcRoot(FusionCharts, Charts, FusionTheme);

  const chartConfigs = {
    type: 'column2d',
    width: '600',
    height: '400',
    dataFormat: 'json',
    dataSource
  };
</script>

<div id="container">
  <SvelteFC {...chartConfigs} />
</div>
export default {
    "chart": {
      "caption": "Countries With Most Oil Reserves [2017-18]",
      "subCaption": "In MMbbl = One Million barrels",
      "xAxisName": "Country",
      "yAxisName": "Reserves (MMbbl)",
      "numberSuffix": "K",
      "theme": "fusion"
    },
    "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"
      }
    ]
  }

Learn more about visual stunning Svelte charts.

Now that we have looked at the source code for the different frameworks available in the comparison above you can dive in deeper to the framework that most interests you and you can also learn more about FusionCharts below.

FusionCharts helps you build beautiful dashboards for your web & mobile projects. With extensive documentation, cross-browser support, and a consistent API, it is easier than ever to add interactive and responsive charts. From simple charts like line, column, and pie to domain-specific charts like heatmaps, radar, and stock charts we’ve got you covered.

Start building your dashboards with FusionCharts today.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS