{"id":19185672,"url":"https://github.com/fusioncharts/fusioncharts-dist","last_synced_at":"2025-05-16T00:06:23.825Z","repository":{"id":46964045,"uuid":"67593291","full_name":"fusioncharts/fusioncharts-dist","owner":"fusioncharts","description":"FusionCharts JavaScript Charting library. Over 95+ charts and 1,400+ maps to choose from, with integrations available for all popular JavaScript frameworks \u0026 back-end programming languages. ","archived":false,"fork":false,"pushed_at":"2024-11-12T14:58:42.000Z","size":12960,"stargazers_count":86,"open_issues_count":41,"forks_count":46,"subscribers_count":12,"default_branch":"develop","last_synced_at":"2025-05-09T18:25:34.598Z","etag":null,"topics":["area-charts","bar-charts","charts","column-charts","dashboards","data-stories","dataviz","gantt-chart","graphs","javascript-charts","js-charts","line-charts","pie-charts","visualization"],"latest_commit_sha":null,"homepage":"https://www.fusioncharts.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fusioncharts.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-07T09:37:58.000Z","updated_at":"2025-03-04T09:21:57.000Z","dependencies_parsed_at":"2024-03-21T19:26:17.364Z","dependency_job_id":"1903e717-4563-4c77-8b09-1c501bb5b474","html_url":"https://github.com/fusioncharts/fusioncharts-dist","commit_stats":{"total_commits":44,"total_committers":9,"mean_commits":4.888888888888889,"dds":0.4772727272727273,"last_synced_commit":"7fc0eaa97a202ebda7ede6b15ca7ba905f409614"},"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffusioncharts-dist","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffusioncharts-dist/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffusioncharts-dist/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Ffusioncharts-dist/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fusioncharts","download_url":"https://codeload.github.com/fusioncharts/fusioncharts-dist/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254442854,"owners_count":22071878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["area-charts","bar-charts","charts","column-charts","dashboards","data-stories","dataviz","gantt-chart","graphs","javascript-charts","js-charts","line-charts","pie-charts","visualization"],"created_at":"2024-11-09T11:11:26.393Z","updated_at":"2025-05-16T00:06:23.801Z","avatar_url":"https://github.com/fusioncharts.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://cdn.fusioncharts.com/fusioncharts/assets/fusioncharts-logo.svg\" width=\"234px\" alt=\"FusionCharts - Build beautiful web \u0026 mobile dashboards\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\u003cimg alt=\"FusionCharts jsDelivr Hits\" src=\"https://img.shields.io/jsdelivr/npm/hm/fusioncharts.svg\"\u003e\n\u003cimg alt=\"FusionCharts Downloads\" src=\"https://img.shields.io/npm/dm/fusioncharts.svg\"\u003e\n\u003cimg alt=\"FusionCharts NPM Version\" src=\"https://img.shields.io/npm/v/fusioncharts.svg\"\u003e\n\u003c/p\u003e\n\nFusionCharts 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).\n\nThis package also contains FusionTime (timeseries charts), FusionWidgets (gauges, real-time charts), PowerCharts (statistical and advanced charts), and FusionMaps (choropleth geo maps).\n\n- Official Website: [https://www.fusioncharts.com/](https://www.fusioncharts.com/)\n- Documentation: [https://www.fusioncharts.com/dev/](https://www.fusioncharts.com/dev/)\n- Download page: [https://www.fusioncharts.com/download/](https://www.fusioncharts.com/download/)\n- Licensing: [Legal Terms \u0026 Customer Agreements](https://www.ideracorp.com/legal/FusionCharts#tabs-2)\n- Support: [https://www.fusioncharts.com/contact-support](https://www.fusioncharts.com/contact-support)\n- Issues: [https://github.com/fusioncharts/fusioncharts-dist/issues](https://github.com/fusioncharts/fusioncharts-dist/issues)\n\n### What's New\n\n#### New Features\n- FusionCharts version 4.1.0 introduces scrollbar for Waterfall Charts x-axis. Which improves user experience with the layout and scope for additional amount of Data.\n\n  \n#### Improvements\n- FusionCharts version 4.1.0 upgrades the version for underline dependencies of the  'react-native-fusioncharts' package and makes it compatible with 0.70.x, 0.71.x, 0.72.x, 0.73.x and 0.74 versions.\n- Removed the Expo dependency from the react-native-fusioncharts package, now utilizing native packages, resulting in a reduced overall bundle size.\n- FusionCharts version 4.1.0 added new dynamic attributes to control the look and feel of the legend scrollbars.\n   - The useLegendScrollGradient attribute determines whether to enable or disable gradient colors. If the set value is 1, you need to provide gradient colors for legendScrollTrackColor and legendScrollAnchorColor in the form of an object with angle, startColor, and endColor. If the value is set to 0, you should provide legendScrollTrackColor and legendScrollAnchorColor in hexadecimal format instead of an object.\n- Upgraded third-party integrations support:\n  - Updated ember dependency with the latest version.\n  - Addressed dependabot pull requests, to improve security.\n\n\n#### Fixes\n- FusionCharts 4.1.0 added Content Security Policy (CSP) compatibility for the require-trusted-types-for 'script' and style-src directive. \n- Resolved an accessibility issue where the tab would focus on the overall chart area instead of the chart plot when the chart did not have a first x-axis value.\n- Fixed an issue where Multie-Pie charts were not resizing correctly without applying a re-render.\n- Addressed an issue where the watermark from the map was not removed on the application of a valid license key for chart type: maps/france2016.\n- Resolved an issue in the legend-item.js file where the legendData object properties were not passed to the getAnchorProps function causing it to apply the same properties to every legend item, regardless of the data.\n- Fixed the issue of specific series not getting highlighted in the Crossline tooltip when 'applycsstransform' attribute was set to 1.\n- Fixed the issue where on hovering over the data plot, the tooltip showed incorrect values when the cursor moved out of the plot area for the scrollbar2d chart when drawCrossLine is enabled for Scrollbar2d chart and Scroll Stacked bar charts.\n\n\u003cbr /\u003e\n\n---\n\n\u003cbr /\u003e\n\n\n### Table of Contents\n\n- [Installing FusionCharts](#installing-fusioncharts)\n- [Getting Started](#getting-started)\n- [Using FusionCharts as an ES Module](#using-fusioncharts-as-an-es-module)\n- [Related Packages](#related-packages)\n  - [Front-end Integrations](#front-end-integrations)\n  - [Back-end Integrations](#back-end-integrations)\n- [Using Themes](#using-themes)\n- [FusionMaps](#fusionmaps)\n- [Going beyond Charts](#going-beyond-charts)\n- [Version History](#version-history)\n- [Contact Support](#contact-support)\n- [Folder Structure](#folder-structure)\n\n## Installing FusionCharts\n\nThere are multiple ways to install FusionCharts. For general instructions, refer to this [developer docs page](https://www.fusioncharts.com/dev/getting-started/plain-javascript/install-using-plain-javascript).\n\n### Direct Download\n\nAll binaries are located on our [github repository](https://github.com/fusioncharts/fusioncharts-dist). You can also download zipped version [here](https://www.fusioncharts.com/download/).\n\n### Using CDN\n\nInstead of downloading, you can also use FusionCharts’s CDN to access files directly. See below for details\n\n```html\n\u003cscript src=\"https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js\"\u003e\u003c/script\u003e\n```\n\n### Install from NPM\n\n```sh\nnpm install --save fusioncharts [node version v14.12.0 (npm v6.14.8)]\n```\n\nSee [npm documentation](https://docs.npmjs.com/) to know more about npm usage.\n\n## Getting Started\n\nEasiest way to start with FusionCharts is to include the JavaScript library in your webpage, create a `\u003cdiv\u003e` container and chart instance, configure the data and render. Check this HTML snippet below:\n\n```javascript\n\u003c!doctype html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cscript src=\"https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003cdiv id=\"chart-container\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n        FusionCharts.ready(function () {\n            // chart instance\n            var chart = new FusionCharts({\n                type: \"column2d\",\n                renderAt: \"chart-container\", // container where chart will render\n                width: \"600\",\n                height: \"400\",\n                dataFormat: \"json\",\n                dataSource: {\n                    // chart configuration\n                    chart: {\n                        caption: \"Countries With Most Oil Reserves [2017-18]\",\n                        subcaption: \"In MMbbl = One Million barrels\"\n                    },\n                    // chart data\n                    data: [\n                        { label: \"Venezuela\", value: \"290000\" },\n                        { label: \"Saudi\", value: \"260000\" },\n                        { label: \"Canada\", value: \"180000\" },\n                        { label: \"Iran\", value: \"140000\" },\n                        { label: \"Russia\", value: \"115000\" },\n                        { label: \"UAE\", value: \"100000\" },\n                        { label: \"US\", value: \"30000\" },\n                        { label: \"China\", value: \"30000\" }\n                    ]\n                }\n            }).render();\n        });\n    \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nHere’re links to quick start guides:\n\n- [FusionCharts](https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-chart-using-plain-javascript#create-your-first-chart-1)\n- [FusionTime](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)\n- [FusionWidgets](https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-chart-using-plain-javascript#create-your-first-gauge-8)\n- [FusionMaps](https://www.fusioncharts.com/dev/getting-started/plain-javascript/your-first-chart-using-plain-javascript#create-your-first-map-13)\n\n## Using FusionCharts as an ES Module\n\nFusionCharts can be loaded as an ES module via transpilers.\n\n_The following examples presumes you are using npm to install FusionCharts, see Install FusionCharts for more details._\n\n```javascript\nimport FusionCharts from \"fusioncharts/core\";\n\n// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];\nimport Column2D from \"fusioncharts/viz/column2d\";\n\n// add chart as dependency - FusionCharts.addDep(ChartType);\nFusionCharts.addDep(Column2D);\n\n// instantiate the chart.\nvar chartInstance = new FusionCharts({\n  type: \"Column2D\",\n  renderAt: \"chart-container\", // div container where chart will render\n  width: \"600\",\n  height: \"400\",\n  dataFormat: \"json\",\n  dataSource: {\n    // chart configuration\n    chart: {\n      caption: \"Countries With Most Oil Reserves [2017-18]\",\n      subcaption: \"In MMbbl = One Million barrels\",\n    },\n    // chart data\n    data: [\n      { label: \"Venezuela\", value: \"290000\" },\n      { label: \"Saudi\", value: \"260000\" },\n      { label: \"Canada\", value: \"180000\" },\n      { label: \"Iran\", value: \"140000\" },\n      { label: \"Russia\", value: \"115000\" },\n      { label: \"UAE\", value: \"100000\" },\n      { label: \"US\", value: \"30000\" },\n      { label: \"China\", value: \"30000\" },\n    ],\n  },\n});\n\n// render the chart\nchartInstance.render();\n```\n\nWant to render data-driven maps (FusionMaps) - check out [this link](https://www.npmjs.com/package/fusionmaps).\n\n## Related Packages\n\n### Front-end Integrations\n\n|                           |                                                                             |                                                                                                                      |\n| :------------------------ | :-------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------- |\n| AngularJS (1.x and above) | [Github Repo](https://github.com/fusioncharts/angularjs-fusioncharts)       | [Documentation](https://www.fusioncharts.com/dev/getting-started/angular/angularjs/your-first-chart-using-angularjs) |\n| Angular (2.x and above)   | [Github Repo](https://github.com/fusioncharts/angular-fusioncharts)         | [Documentation](https://www.fusioncharts.com/dev/getting-started/angular/angular/your-first-chart-using-angular)     |\n| jQuery                    | [Github Repo](https://github.com/fusioncharts/fusioncharts-jquery-plugin)   | [Documentation](https://www.fusioncharts.com/dev/getting-started/jquery/your-first-chart-using-jquery)               |\n| React                     | [Github Repo](https://github.com/fusioncharts/react-fusioncharts-component) | [Documentation](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react)                 |\n| Vue                       | [Github Repo](https://github.com/fusioncharts/vue-fusioncharts)             | [Documentation](https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs)                   |\n| Ember                     | [Github Repo](https://github.com/fusioncharts/ember-fusioncharts)           | [Documentation](https://www.fusioncharts.com/dev/getting-started/ember/your-first-chart-using-ember)                 |\n\n### Back-end Integrations\n\n|               |                                                                |                                                                                                                      |\n| :------------ | :------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------- |\n| ASP.NET (C#)  | [Github Repo](https://github.com/fusioncharts/asp-net-wrapper) | [Documentation](https://www.fusioncharts.com/dev/getting-started/aspnet/your-first-chart-using-aspnet)               |\n| ASP.NET (VB)  | [Github Repo](https://github.com/fusioncharts/vb-net-wrapper)  | [Documentation](https://www.fusioncharts.com/dev/getting-started/aspnet/your-first-chart-using-aspnet)               |\n| Java (JSP)    | [Github Repo](https://github.com/fusioncharts/jsp-wrapper)     | [Documentation](https://www.fusioncharts.com/dev/getting-started/java/your-first-chart-using-java)                   |\n| Django        | [Github Repo](https://github.com/fusioncharts/django-wrapper)  | [Documentation](https://www.fusioncharts.com/dev/getting-started/django/your-first-chart-using-django)               |\n| PHP           | [Github Repo](https://github.com/fusioncharts/php-wrapper)     | [Documentation](https://www.fusioncharts.com/dev/getting-started/php/your-first-chart-using-php)                     |\n| Ruby on Rails | [Github Repo](https://github.com/fusioncharts/rails-wrapper)   | [Documentation](https://www.fusioncharts.com/dev/getting-started/ruby-on-rails/your-first-chart-using-ruby-on-rails) |\n\n## Using Themes\n\nFusionCharts 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:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cscript src=\"https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"chart-container\"\u003e\u003c/div\u003e\n    \u003cscript\u003e\n      FusionCharts.ready(function () {\n        // chart instance\n        var chart = new FusionCharts({\n          type: \"column2d\",\n          renderAt: \"chart-container\", // container where chart will render\n          width: \"600\",\n          height: \"400\",\n          dataFormat: \"json\",\n          dataSource: {\n            // chart configuration\n            chart: {\n              caption: \"Countries With Most Oil Reserves [2017-18]\",\n              subcaption: \"In MMbbl = One Million barrels\",\n              theme: \"fusion\", //Specifying which theme to use\n            },\n            // chart data\n            data: [\n              { label: \"Venezuela\", value: \"290000\" },\n              { label: \"Saudi\", value: \"260000\" },\n              { label: \"Canada\", value: \"180000\" },\n              { label: \"Iran\", value: \"140000\" },\n              { label: \"Russia\", value: \"115000\" },\n              { label: \"UAE\", value: \"100000\" },\n              { label: \"US\", value: \"30000\" },\n              { label: \"China\", value: \"30000\" },\n            ],\n          },\n        }).render();\n      });\n    \u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Using themes in ES6\n\n```javascript\nimport FusionCharts from \"fusioncharts/core\";\n\n// include chart from viz folder - import ChartType from fusioncharts/viz/[ChartType];\nimport Column2D from \"fusioncharts/viz/column2d\";\n\n// include theme from themes folder\nimport fusionTheme from \"fusioncharts/themes/es/fusioncharts.theme.fusion\";\n\n// add chart as dependency - FusionCharts.addDep(ChartType);\nFusionCharts.addDep(Column2D);\nFusionCharts.addDep(fusionTheme);\n\n// instantiate the chart.\nvar chartInstance = new FusionCharts({\n  type: \"Column2D\",\n  renderAt: \"chart-container\", // container where chart will render\n  width: \"600\",\n  height: \"400\",\n  dataFormat: \"json\",\n  dataSource: {\n    // chart configuration\n    chart: {\n      caption: \"Countries With Most Oil Reserves [2017-18]\",\n      subcaption: \"In MMbbl = One Million barrels\",\n      theme: \"fusion\",\n    },\n    // chart data\n    data: [\n      { label: \"Venezuela\", value: \"290000\" },\n      { label: \"Saudi\", value: \"260000\" },\n      { label: \"Canada\", value: \"180000\" },\n      { label: \"Iran\", value: \"140000\" },\n      { label: \"Russia\", value: \"115000\" },\n      { label: \"UAE\", value: \"100000\" },\n      { label: \"US\", value: \"30000\" },\n      { label: \"China\", value: \"30000\" },\n    ],\n  },\n});\n\n// render the chart\nchartInstance.render();\n```\n\nSee all the themes live [here](https://www.fusioncharts.com/explore/chart-gallery/stacked-charts/stacked-columns). Check out [this link](https://www.fusioncharts.com/dev/themes/introduction-to-themes) to know more about themes. Want us to build a theme to suit your corporate branding? [Request one here](https://www.fusioncharts.com/contact-support)!\n\n## FusionMaps\n\nFusionMaps 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:\n\n- [Examples](https://www.fusioncharts.com/explore/chart-gallery?product=fusionmaps)\n- [Documentation](https://www.fusioncharts.com/dev/map-guide/setup)\n- [Github Repo](https://github.com/fusioncharts/fusionmaps-dist) and [NPM Package](https://www.npmjs.com/package/fusionmaps)\n\n## Going beyond Charts\n\n- Explore 20+ pre-built business specific dashboards for different industries like energy and manufacturing to business functions like sales, marketing and operations [here](https://www.fusioncharts.com/explore/dashboards).\n- See [Data Stories](https://www.fusioncharts.com/explore/data-stories) built using FusionCharts’ interactive JavaScript visualizations and learn how to communicate real-world narratives through underlying data to tell compelling stories.\n\n## Version History\n\n- [What’s New](https://www.fusioncharts.com/dev/upgrading/whats-new)\n- [Change Log](https://www.fusioncharts.com/dev/upgrading/change-log)\n- [Changed Behaviour \u0026 Depreciation](https://www.fusioncharts.com/dev/upgrading/changed-behavior)\n\n## Contact Support\n\nFill [this form](https://www.fusioncharts.com/contact-support) or drop an email to [support@fusioncharts.com](mailto:support@fusioncharts.com)\n\n## Folder Structure\n\n```\nfusioncharts/\n  ├── core/ - Contains the FusionCharts core.\n  ├── viz/ - Contains all the individual vizualizations (Column2D, SplineArea, AngularGauge etc.)\n  ├── charts/ - Contains all the visualizations of the Charts package (similar to fusioncharts.charts.js).\n  ├── powercharts/ - Contains all the visualizations of the PowerCharts package.\n  ├── timeseries/ - Contains all the visualizations of the FusionTime package.\n  ├── widgets/ - Contains all the visualizations of the FusionWidgets package.\n  ├── maps/ - Contains the map renderer\n  │   └── es/ - Contains the map definition files of World and USA\n  └── themes/es - Contains all the theme files.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Ffusioncharts-dist","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffusioncharts%2Ffusioncharts-dist","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Ffusioncharts-dist/lists"}