FusionCharts is a JavaScript charting library form which you can create line, column, area, bar, pie, doughnut and many more charts as you need. Also, you can find 3d interactive charts within this plugin.

Features:

• It can be installed with NPM.
• Supports 2d and 3d charts without extra coding.
• Supports column and line combination chart at the same time.
• Fetch data remotely from a JSON file or URL
• Change the data dynamically and watch the chart update automatically
• Update the chart with new attributes

Install with npm

$ npm install jquery-fusioncharts --save

How to use it:

1. Include the Javascript fusioncharts.js and fusioncharts.theme.fusion.js at the bottom of the web page.

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>

<script src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

2. Add the basic HTML to the page.

<div id="chart-container"></div>

3. Initialize the plugin and we're ready to go.

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "column2d",
    renderAt: "chart-container", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
          theme: "fusion" //Specifying which theme to use
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
  }).render();
});

Plugin's default options:

Please visit the official website for more information.

<div id="chart-container"></div>

FusionCharts.ready(function () {
// chart instance
var chart = new FusionCharts({
  type: "column2d",
  renderAt: "chart-container", // container where chart will render
  width: "100%",
  height: "500",
  dataFormat: "json",
  dataSource: {
    // chart configuration
    chart: {
        caption: "Countries With Most Oil Reserves [2017-18]",
        subcaption: "In MMbbl = One Million barrels",
        theme: "fusion" //Specifying which theme to use
    },
    // chart data
    data: [
      { label: "Venezuela", value: "290000" },
      { label: "Saudi", value: "260000" },
      { label: "Canada", value: "180000" },
      { label: "Iran", value: "140000" },
      { label: "Russia", value: "115000" },
      { label: "UAE", value: "100000" },
      { label: "US", value: "30000" },
      { label: "China", value: "30000" }
    ]
  }
}).render();
});

<div id="chart-container-pie3d"></div>

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "pie3d",
    renderAt: "chart-container-pie3d", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
          theme: "fusion" //Specifying which theme to use
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
  }).render();
});

<div id="chart-container-column3d"></div>

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "column3d",
    renderAt: "chart-container-column3d", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
          theme: "fusion" //Specifying which theme to use
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
  }).render();
  });

<div id="chart-container-pie2d"></div>

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "pie2d",
    renderAt: "chart-container-pie2d", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
          theme: "fusion" //Specifying which theme to use
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
  }).render();
});

<div id="chart-container-doughnut3d"></div>

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "doughnut3d",
    renderAt: "chart-container-doughnut3d", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
          theme: "fusion" //Specifying which theme to use
      },
      // chart data
      data: [
        { label: "Venezuela", value: "290000" },
        { label: "Saudi", value: "260000" },
        { label: "Canada", value: "180000" },
        { label: "Iran", value: "140000" },
        { label: "Russia", value: "115000" },
        { label: "UAE", value: "100000" },
        { label: "US", value: "30000" },
        { label: "China", value: "30000" }
      ]
    }
  }).render();
});

<div id="chart-container-spline"></div>

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "spline",
    renderAt: "chart-container-spline", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
        caption: "Bakersfield Central - Total footfalls",
        subCaption: "Last week",
        xAxisName: "Day",
        yAxisName: "No. of Visitors (In 1000s)",
        showValues: "0",
        theme: "fusion"
      },
      // chart data
      data: [
        { label: "Mon", value: "15123"},
        { label: "Tue", value: "14233"},
        { label: "Wed", value: "25507"},
        { label: "Thu", value: "9110"},
        { label: "Fri", value: "15529"},
        { label: "Sat", value: "20803"},
        { label: "Sun", value: "19202"}
      ]
    }
  }).render();
});

<div id="chart-container-world"></div>

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "world",
    renderAt: "chart-container-world", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
        caption: "Average Annual Population Growth",
        subcaption: " 1955-2015",
        numbersuffix: "%",
        includevalueinlabels: "1",
        labelsepchar: ": ",
        entityFillHoverColor: "#FFF9C4",
        theme: "fusion"
      },
      colorrange: {
        minvalue: "0",
        code: "#FFE0B2",
        gradient: "1",
        color: [
            { minvalue: "0.5", maxvalue: "1.0", color: "#FFD74D"},
            { minvalue: "1.0", maxvalue: "2.0", color: "#FB8C00"},
            { minvalue: "2.0", maxvalue: "3.0", color: "#E65100"}
          ]
        },
      // chart data
      data: [
        { id: "NA", value: ".82", showLabel: "1"},
        { id: "SA", value: "2.04", showLabel: "1"},
        { id: "AS", value: "1.78", showLabel: "1"},
        { id: "EU", value: ".40", showLabel: "1"},
        { id: "AF", value: "2.58", showLabel: "1"},
        { id: "AU", value: "1.30", showLabel: "1"}
      ]
    }
  }).render();
});

<div id="chart-container-angulargauge"></div>

FusionCharts.ready(function () {
  // chart instance
  var chart = new FusionCharts({
    type: "angulargauge",
    renderAt: "chart-container-angulargauge", // container where chart will render
    width: "100%",
    height: "500",
    dataFormat: "json",
    dataSource: {
      // chart configuration
      chart: {
        caption: "Nordstorm's Customer Satisfaction Score for 2017",
        lowerLimit: "0",
        upperLimit: "100",
        showValue: "1",
        numberSuffix: "%",
        theme: "fusion",
        showToolTip: "0"
      },
      colorRange: {
        color: [
            { minValue: "0", maxValue: "50",code: "#F2726F"},
            { minValue: "50", maxValue: "75", code: "#FFC533"},
            { minValue: "75", maxValue: "100", code: "#62B58F" }
          ]
      },
      dials: {
        dial: [
          { value: "81"}
        ]
      }
    }
  }).render();
});