{"id":12733,"library":"fusioncharts","title":"FusionCharts JavaScript Charting Library","description":"FusionCharts is a comprehensive JavaScript charting library that provides over 100 chart types and 2,000+ geographical maps for web and mobile applications. It includes specialized modules like FusionTime for time-series charts, FusionWidgets for gauges and real-time visualizations, PowerCharts for advanced statistical charts, and FusionMaps for choropleth geo maps. All visualizations are interactive and animated, rendering primarily in SVG, with VML support for older Internet Explorer versions. The current stable version is 4.2.2, released in April 2026, indicating an active development and release cadence with regular improvements and fixes. Key differentiators include its extensive chart and map catalog, its support for legacy browser environments, and its modular architecture allowing selective loading of chart types and themes.","status":"active","version":"4.2.2","language":"javascript","source_language":"en","source_url":"https://github.com/fusioncharts/fusioncharts-dist","tags":["javascript","fusioncharts","charts","dataviz","graphs","visualization","js-charts","javascript-charts","dashboards"],"install":[{"cmd":"npm install fusioncharts","lang":"bash","label":"npm"},{"cmd":"yarn add fusioncharts","lang":"bash","label":"yarn"},{"cmd":"pnpm add fusioncharts","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Optional dependency for using the FusionCharts jQuery plugin integration, which simplifies embedding charts into jQuery-based applications.","package":"jquery","optional":true}],"imports":[{"note":"The core FusionCharts library is imported from the 'fusioncharts/core' path, rather than directly from the main 'fusioncharts' package entry point, for tree-shaking and modularity.","wrong":"const FusionCharts = require('fusioncharts');","symbol":"FusionCharts","correct":"import FusionCharts from 'fusioncharts/core';"},{"note":"Specific chart types, like Column2D, are imported as default exports from their respective sub-paths under 'fusioncharts/charts'. After importing, they must be added as a dependency to the FusionCharts core using `FusionCharts.addDep()`.","wrong":"import { Column2D } from 'fusioncharts';","symbol":"Column2D","correct":"import Column2D from 'fusioncharts/charts/fusioncharts.charts';"},{"note":"Themes, such as the 'fusion' theme, are imported as default exports from their specific paths under 'fusioncharts/themes'. They also need to be registered with the core FusionCharts instance via `FusionCharts.addDep()`.","wrong":"import { FusionTheme } from 'fusioncharts';","symbol":"FusionTheme","correct":"import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';"}],"quickstart":{"code":"import FusionCharts from 'fusioncharts/core';\nimport Column2D from 'fusioncharts/charts/fusioncharts.charts';\nimport FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\n// Add required chart types and themes as dependencies to FusionCharts\nFusionCharts.addDep(Column2D);\nFusionCharts.addDep(FusionTheme);\n\n// Prepare chart configuration\nconst chartConfig = {\n    type: 'column2d', // Specify the chart type\n    renderAt: 'chart-container', // ID of the DOM element to render the chart into\n    width: '600', // Width of the chart\n    height: '400', // Height of the chart\n    dataFormat: 'json', // Data format to be used\n    dataSource: {\n        chart: {\n            caption: 'Monthly Revenue', // Chart caption\n            subCaption: 'Last 5 months', // Chart sub-caption\n            xAxisName: 'Month', // X-axis title\n            yAxisName: 'Amount (USD)', // Y-axis title\n            numberPrefix: '$', // Prefix for numbers on y-axis\n            theme: 'fusion' // Apply the Fusion theme\n        },\n        data: [\n            { label: 'Jan', value: '420000' },\n            { label: 'Feb', value: '810000' },\n            { label: 'Mar', value: '720000' },\n            { label: 'Apr', value: '550000' },\n            { label: 'May', value: '910000' }\n        ]\n    }\n};\n\n// Assume there's a div in your HTML like: <div id=\"chart-container\"></div>\n// Create a new FusionCharts instance\nconst myChart = new FusionCharts(chartConfig);\n\n// Render the chart into the specified DOM element\nmyChart.render();\n\nconsole.log('FusionCharts instance created and rendering initiated.');","lang":"typescript","description":"This quickstart demonstrates how to set up, import, and render a basic 2D column chart using FusionCharts ES modules and a specific theme. It covers registering chart types and themes, configuring data sources, and rendering the chart to a DOM element."},"warnings":[{"fix":"Refer to the official FusionCharts documentation for the 3.x to 4.x migration guide on the FusionCharts developer website to understand necessary API adjustments and import changes.","message":"Major version 4.x likely introduced breaking API changes from 3.x, especially around modularization and dependency management. While specific changes aren't detailed in the provided release notes, users upgrading from 3.x should consult the full migration guide.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Review the 'Legal Terms & Customer Agreements' link on the official FusionCharts website to understand licensing requirements for your specific use case and ensure compliance.","message":"FusionCharts is a commercial product. While there might be free trial or developer editions, commercial use typically requires purchasing a license. Refer to the licensing terms for details, as improper licensing can lead to legal issues or watermarks on charts.","severity":"gotcha","affected_versions":"all"},{"fix":"Consult the FusionCharts documentation on browser compatibility and VML rendering for optimal setup and to address any rendering issues in legacy IE environments.","message":"Using FusionCharts in older Internet Explorer versions (IE 6-8) relies on VML rendering, a legacy technology. This might have compatibility quirks and could require specific configurations or polyfills not typically needed for modern SVG-based rendering in contemporary browsers.","severity":"gotcha","affected_versions":"<=8"},{"fix":"Update your jQuery plugin script tags to use the new official CDN paths (e.g., 'https://cdn.fusioncharts.com/jquery-fusioncharts/latest/jquery.fusioncharts.min.js') as described in the v4.2.2 release notes.","message":"The jQuery plugin's delivery method improved in v4.2.2, with official CDN hosting for versioned and latest paths. If you were previously self-hosting or using a different CDN path for the jQuery plugin, your existing links might break or require updates.","severity":"gotcha","affected_versions":">=4.2.2"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using the correct module syntax for your environment. For ES Modules, use `import FusionCharts from 'fusioncharts/core';`. If using CommonJS, confirm your bundler supports it or use the CDN script tag approach.","cause":"Attempting to use FusionCharts with CommonJS `require()` syntax in an ES Module environment or without a proper module bundler configured for CJS, or vice-versa.","error":"FusionCharts is not defined or require is not defined"},{"fix":"Verify that the DOM element with the specified ID (e.g., 'chart-container') exists in your HTML structure and that your JavaScript code executes after the DOM has been fully loaded (e.g., inside a `DOMContentLoaded` listener or at the end of the `<body>`).","cause":"The target DOM element specified in the `renderAt` property of the chart configuration does not exist in the HTML, or it is not available in the DOM when the chart attempts to render.","error":"Chart not rendered: No div element with ID 'chart-container' found."},{"fix":"Ensure you import the necessary chart module (e.g., `import Column2D from 'fusioncharts/charts/fusioncharts.charts';`) and then register it: `FusionCharts.addDep(Column2D);` before creating the chart instance.","cause":"The specific chart type module required (e.g., `Column2D` for 'column2d' chart type) has not been imported and registered as a dependency to the main `FusionCharts` instance using `FusionCharts.addDep()`.","error":"Error: No chart module found for type 'column2d'."}],"ecosystem":"npm"}