fusioncharts
    DefinitelyTyped icon, indicating that this package has TypeScript declarations provided by the separate @types/fusioncharts package

    3.18.0 • Public • Published

    FusionCharts - Build beautiful web & mobile dashboards FusionCharts jsDelivr Hits FusionCharts Downloads FusionCharts NPM Version

    FusionCharts is a JavaScript charting library providing 100+ charts and 2,000+ maps for your web and mobile applications. All the visualizations are interactive and animated, which are rendered in SVG and VML (for IE 6/7/8).

    This package also contains FusionTime (timeseries charts), FusionWidgets (gauges, real-time charts), PowerCharts (statistical and advanced charts), and FusionMaps (choropleth geo maps).

    What's New

    FusionCharts

    • Improved Angular and Vue Integration Components 🔥
    • Accessibility Theme 🆕
    • Improved Excel/CSV Export ✉️
    • API Events and Methods Enhancements 💥
    • Improvements across axis, legend, and API events and methods 💥

    FusionTime

    • Weekly Data Binning 🆕🔥
    • Improved Space Management 📐
    • Improvements across API events and methods, zooming/panning, and data store 💥

    Table of Contents

    Installing FusionCharts

    There are multiple ways to install FusionCharts. For general instructions, refer to this developer docs page.

    Direct Download

    All binaries are located on our github repository. You can also download zipped version here.

    Using CDN

    Instead of downloading, you can also use FusionCharts’s CDN to access files directly. See below for details

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

    Install from NPM

    npm install --save fusioncharts [node version v12.4.0 (npm v6.9.0)]

    See npm documentation to know more about npm usage.

    Getting Started

    Easiest way to start with FusionCharts is to include the JavaScript library in your webpage, create a <div> container and chart instance, configure the data and render. Check this HTML snippet below:

    <!doctype html>
    <html>
    <head>
        <script src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
    </head>
    <body>
        <div id="chart-container"></div>
        <script>
            FusionCharts.ready(function () {
                // chart instance
                var chart = new FusionCharts({
                    type: "column2d",
                    renderAt: "chart-container", // container where chart will render
                    width: "600",
                    height: "400",
                    dataFormat: "json",
                    dataSource: {
                        // chart configuration
                        chart: {
                            caption: "Countries With Most Oil Reserves [2017-18]",
                            subcaption: "In MMbbl = One Million barrels"
                        },
                        // 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();
            });
        </script>
    </body>
    </html>

    Here’re links to quick start guides:

    Using FusionCharts as an ES Module

    FusionCharts can be loaded as an ES module via transpilers.

    The following examples presumes you are using npm to install FusionCharts, see Install FusionCharts for more details.

    import FusionCharts from "fusioncharts/core";
    
    // include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];
    import Column2D from "fusioncharts/viz/column2d";
    
    // add chart as dependency - FusionCharts.addDep(ChartType);
    FusionCharts.addDep(Column2D);
    
    // instantiate the chart.
    var chartInstance = new FusionCharts({
      type: "Column2D",
      renderAt: "chart-container", // div container where chart will render
      width: "600",
      height: "400",
      dataFormat: "json",
      dataSource: {
        // chart configuration
        chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
        },
        // 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 the chart
    chartInstance.render();

    Want to render data-driven maps (FusionMaps) - check out this link.

    Related Packages

    Front-end Integrations

    AngularJS (1.x and above) Github Repo Documentation
    Angular (2.x and above) Github Repo Documentation
    jQuery Github Repo Documentation
    React Github Repo Documentation
    Vue Github Repo Documentation
    Ember Github Repo Documentation

    Back-end Integrations

    ASP.NET (C#) Github Repo Documentation
    ASP.NET (VB) Github Repo Documentation
    Java (JSP) Github Repo Documentation
    Django Github Repo Documentation
    PHP Github Repo Documentation
    Ruby on Rails Github Repo Documentation

    Using Themes

    FusionCharts provides several out-of-the box themes that can be applied to all the charts to configure the visual appearance of the charts. Below is an example on how to use a theme:

    <!DOCTYPE html>
    <html>
      <head>
        <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>
      </head>
      <body>
        <div id="chart-container"></div>
        <script>
          FusionCharts.ready(function () {
            // chart instance
            var chart = new FusionCharts({
              type: "column2d",
              renderAt: "chart-container", // container where chart will render
              width: "600",
              height: "400",
              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();
          });
        </script>
      </body>
    </html>

    Using themes in ES6

    import FusionCharts from "fusioncharts/core";
    
    // include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];
    import Column2D from "fusioncharts/viz/column2d";
    
    // include theme from themes folder
    import fusionTheme from "fusioncharts/themes/es/fusioncharts.theme.fusion";
    
    // add chart as dependency - FusionCharts.addDep(ChartType);
    FusionCharts.addDep(Column2D);
    FusionCharts.addDep(fusionTheme);
    
    // instantiate the chart.
    var chartInstance = new FusionCharts({
      type: "Column2D",
      renderAt: "chart-container", // container where chart will render
      width: "600",
      height: "400",
      dataFormat: "json",
      dataSource: {
        // chart configuration
        chart: {
          caption: "Countries With Most Oil Reserves [2017-18]",
          subcaption: "In MMbbl = One Million barrels",
          theme: "fusion",
        },
        // 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 the chart
    chartInstance.render();

    See all the themes live here. Check out this link to know more about themes. Want us to build a theme to suit your corporate branding? Request one here!

    FusionMaps

    FusionMaps is a companion package meant to be used in conjunction with FusionCharts to render choropleth geo maps. FusionMaps provide over 1,400+ geographical maps, including all countries, US states, and regions in Europe for plotting business data like revenue by regions, employment levels by state and office locations. See below links to know more:

    Going beyond Charts

    • Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations here.
    • See Data Stories built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.

    Version History

    Contact Support

    Fill this form or drop an email to [support@fusioncharts.com](mailto: support@fusioncharts.com)

    Folder Structure

    fusioncharts/
      ├── core/ - Contains the FusionCharts core.
      ├── viz/ - Contains all the individual vizualizations (Column2D, SplineArea, AngularGauge etc.)
      ├── charts/ - Contains all the visualizations of the Charts package (similar to fusioncharts.charts.js).
      ├── powercharts/ - Contains all the visualizations of the PowerCharts package.
      ├── timeseries/ - Contains all the visualizations of the FusionTime package.
      ├── widgets/ - Contains all the visualizations of the FusionWidgets package.
      ├── maps/ - Contains the map renderer
      │   └── es/ - Contains the map definition files of World and USA
      └── themes/es - Contains all the theme files.
    

    Install

    npm i fusioncharts

    DownloadsWeekly Downloads

    18,256

    Version

    3.18.0

    License

    http://www.fusioncharts.com/buy/

    Unpacked Size

    4.76 MB

    Total Files

    228

    Last publish

    Collaborators

    • jimmy.phomphaksavanh
    • andywilson
    • sanjay.bhan
    • sikrigagan
    • siawo