{"id":19185694,"url":"https://github.com/fusioncharts/react-fusioncharts-component","last_synced_at":"2025-04-05T03:10:37.070Z","repository":{"id":15580703,"uuid":"78421779","full_name":"fusioncharts/react-fusioncharts-component","owner":"fusioncharts","description":"ReactJS component for FusionCharts JavaScript Charting library.","archived":false,"fork":false,"pushed_at":"2024-08-31T05:20:37.000Z","size":20099,"stargazers_count":94,"open_issues_count":9,"forks_count":32,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-29T02:05:46.037Z","etag":null,"topics":["charts","dashboards","data-stories","data-visualization","dataviz","fusioncharts","fusionmaps","fusionwidgets","graphs","interactive-charts","javascript-charts","js-charts","powercharts","react","react-charts","react-fusioncharts","react-fusioncharts-component","reactjs","timeseries","visualization"],"latest_commit_sha":null,"homepage":"https://fusioncharts.github.io/react-fusioncharts-component/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","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":"2017-01-09T11:13:17.000Z","updated_at":"2024-11-26T20:57:11.000Z","dependencies_parsed_at":"2024-08-23T21:09:46.996Z","dependency_job_id":"bb1830b1-ee9e-4aca-a4e9-bb643ab501bb","html_url":"https://github.com/fusioncharts/react-fusioncharts-component","commit_stats":{"total_commits":118,"total_committers":17,"mean_commits":"6.9411764705882355","dds":0.728813559322034,"last_synced_commit":"8e8c24e2816aa7c510d841e43a737dc135c8e9c5"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Freact-fusioncharts-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Freact-fusioncharts-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Freact-fusioncharts-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fusioncharts%2Freact-fusioncharts-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fusioncharts","download_url":"https://codeload.github.com/fusioncharts/react-fusioncharts-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247280272,"owners_count":20912967,"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":["charts","dashboards","data-stories","data-visualization","dataviz","fusioncharts","fusionmaps","fusionwidgets","graphs","interactive-charts","javascript-charts","js-charts","powercharts","react","react-charts","react-fusioncharts","react-fusioncharts-component","reactjs","timeseries","visualization"],"created_at":"2024-11-09T11:11:34.344Z","updated_at":"2025-04-05T03:10:37.029Z","avatar_url":"https://github.com/fusioncharts.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"A simple and lightweight official React component for FusionCharts JavaScript charting library. `react-fusioncharts` enables you to add JavaScript charts in your React application or project without any hassle.\n\n## [Demo](https://fusioncharts.github.io/react-fusioncharts-component/)\n\n- Github Repo: [https://github.com/fusioncharts/react-fusioncharts-component](https://github.com/fusioncharts/react-fusioncharts-component)\n- Documentation: [https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react)\n- Support: [https://www.fusioncharts.com/contact-support](https://www.fusioncharts.com/contact-support)\n- FusionCharts\n  - Official Website: [https://www.fusioncharts.com/](https://www.fusioncharts.com/)\n  - Official NPM Package: [https://www.npmjs.com/package/fusioncharts](https://www.npmjs.com/package/fusioncharts)\n- Issues: [https://github.com/fusioncharts/react-fusioncharts-component/issues](https://github.com/fusioncharts/react-fusioncharts-component/issues)\n\n---\n\n## Validation and Verification\n\nThe FusionCharts React integration component has been verified and validated with different versions of Fusioncharts (3.19 / 3.18 / 3.17) with React versions 16/17/18\n\n## Table of Contents\n\n- [Getting Started](#getting-started)\n  - [Requirements](#requirements)\n  - [Installation](#installation)\n  - [Usage](#usage)\n  - [Working with chart API](#working-with-apis)\n  - [Working with events](#working-with-events)\n- [Quick Start](#quick-start)\n- [Custom Components](#custom-components)\n  - [Drill Down](#drill-down-component)\n- [Going Beyond Charts](#going-beyond-charts)\n- [Usage and Integration of FusionTime](#usage-and-integration-of-fusionTime)\n- [For Contributors](#for-contributors)\n- [Licensing](#licensing)\n\n## Getting Started\n\n### Requirements\n\n- **Node.js**, **NPM/Yarn** installed globally in your OS.\n- **FusionCharts** and **React** installed in your project, as detailed below:\n\n### Installation\n\nThere are multiple ways to install `react-fusioncharts` component.\n\n**Direct Download**\nAll binaries are located on our [github repository](https://github.com/fusioncharts/react-fusioncharts-component).\n\n**Install from NPM**\n\n```\nnpm install --save react-fusioncharts\n```\n\nSee [npm documentation](https://docs.npmjs.com/) to know more about npm usage.\n\n**Install from Yarn**\n\n```\nyarn add react-fusioncharts\n```\n\nSee [yarn documentation](https://yarnpkg.com/en/docs) to know more about yarn usage.\n\nFor general instructions, refer to this [developer docs page](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react#installation-2).\n\n### Usage\n\n#### If you have created your app using `create-react-app`\n\nImport React, `react-fusioncharts` and FusionCharts in your app:\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FusionCharts from 'fusioncharts';\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport ReactFC from 'react-fusioncharts';\n\nReactFC.fcRoot(FusionCharts, Charts);\n```\n\n#### If you have created your app using tools like `webpack` or `parcel`\n\nImport React, `react-fusioncharts` and FusionCharts in your app:\n\n```\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FusionCharts from 'fusioncharts/core';\nimport Column2d from 'fusioncharts/viz/column2d';\nimport ReactFC from 'react-fusioncharts';\n\nReactFC.fcRoot(FusionCharts, Column2d);\n```\n\nNote: This way of import will not work in IE11 and below.\n\n## Quick Start\n\nHere is a basic sample that shows how to create a chart using `react-fusioncharts`:\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FusionCharts from 'fusioncharts';\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\nimport ReactFC from 'react-fusioncharts';\n\nReactFC.fcRoot(FusionCharts, Charts, FusionTheme);\n\nconst dataSource = {\n  chart: {\n    caption: 'Countries With Most Oil Reserves [2017-18]',\n    subCaption: 'In MMbbl = One Million barrels',\n    xAxisName: 'Country',\n    yAxisName: 'Reserves (MMbbl)',\n    numberSuffix: 'K',\n    theme: 'fusion'\n  },\n  data: [\n    { label: 'Venezuela', value: '290' },\n    { label: 'Saudi', value: '260' },\n    { label: 'Canada', value: '180' },\n    { label: 'Iran', value: '140' },\n    { label: 'Russia', value: '115' },\n    { label: 'UAE', value: '100' },\n    { label: 'US', value: '30' },\n    { label: 'China', value: '30' }\n  ]\n};\n\nconst chartConfigs = {\n  type: 'column2d',\n  width: 600,\n  height: 400,\n  dataFormat: 'json',\n  dataSource: dataSource\n};\n\nReactDOM.render(\u003cReactFC {...chartConfigs} /\u003e, document.getElementById('root'));\n```\n\n## Render FusionMaps\n\nTo render a map, import the FusionMaps module along with the map definition.\n\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport FusionCharts from 'fusioncharts';\nimport Maps from 'fusioncharts/fusioncharts.maps';\nimport World from 'fusioncharts/maps/fusioncharts.world';\nimport FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\nimport ReactFC from 'react-fusioncharts';\n\nReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme);\n// Data Source B\nconst dataSource = {\n  chart: {\n    caption: 'Average Annual Population Growth',\n    subcaption: ' 1955-2015',\n    numbersuffix: '%',\n    includevalueinlabels: '1',\n    labelsepchar: ': ',\n    entityFillHoverColor: '#FFF9C4',\n    theme: 'fusion'\n  },\n  colorrange: {\n    minvalue: '0',\n    code: '#FFE0B2',\n    gradient: '1',\n    color: [\n      { minvalue: '0.5', maxvalue: '1.0', color: '#FFD74D' },\n      { minvalue: '1.0', maxvalue: '2.0', color: '#FB8C00' },\n      { minvalue: '2.0', maxvalue: '3.0', color: '#E65100' }\n    ]\n  },\n  data: [\n    { id: 'NA', value: '.82', showLabel: '1' },\n    { id: 'SA', value: '2.04', showLabel: '1' },\n    { id: 'AS', value: '1.78', showLabel: '1' },\n    { id: 'EU', value: '.40', showLabel: '1' },\n    { id: 'AF', value: '2.58', showLabel: '1' },\n    { id: 'AU', value: '1.30', showLabel: '1' }\n  ]\n};\n\nconst chartConfigs = {\n  type: 'world',\n  width: 600,\n  height: 400,\n  dataFormat: 'json',\n  dataSource: dataSource\n};\n\nReactDOM.render(\u003cReactFC {...chartConfigs} /\u003e, document.getElementById('root'));\n```\n\n## Working with Events\n\nTo attach event callbacks to a FusionCharts component, follow the pattern below.\n\nWrite the callback:\n\nAs a separate function:\n\n```javascript\nvar chartEventCallback  = function (eventObj, dataObj) {\n  [Code goes here]\n}\n```\n\nOr, as a component class method:\n\n```javascript\nchartEventCallback (eventObj, dataObj) {\n  [Code goes here]\n}\n```\n\nAttach the callback to an event through the React-FC component:\n\n```javascript\n\u003cReactFC {...chartConfigs} fcEvent-EVENTNAME={this.chartEventCallback} /\u003e\n```\n\nWhere, EVENTNAME is to be replaced by the event you want to track.\n\n##### Consider the example below that tracks hover events on a data plot.\n\n```javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport FusionCharts from 'fusioncharts';\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport ReactFC from 'react-fusioncharts';\nimport FusionTheme from 'fusioncharts/Charts/fusioncharts.theme.fusion';\n\nReactFC.fcRoot(FusionCharts, Charts, FusionTheme);\n\nconst dataSource = /* Data Source A , given above */;\n\nconst chartConfigs = {\n  type: 'column2d',\n  width: 600,\n  height: 400,\n  dataFormat: 'json',\n  dataSource: dataSource\n};\n\nclass Chart extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      actualValue: 'Hover on the plot to see the value along with the label'\n    };\n    this.showPlotValue = this.showPlotValue.bind(this);\n  }\n\n  // Event callback handler for 'dataplotRollOver'.\n  // Shows the value of the hovered plot on the page.\n  showPlotValue(eventObj, dataObj) {\n    this.setState({\n      actualValue: `You’re are currently hovering over ${\n        dataObj.categoryLabel\n      } whose value is ${dataObj.displayValue}`\n    });\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cReactFC\n          {...chartConfigs}\n          fcEvent-dataplotRollOver={this.showPlotValue}\n        /\u003e\n        \u003cp style={{ padding: '10px', background: '#f5f2f0' }}\u003e\n          {this.state.actualValue}\n        \u003c/p\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cChart /\u003e, document.getElementById('root'));\n```\n\n## Usage and integration of FusionTime\n\nFrom `fusioncharts@3.13.3-sr.1` and `react-fusioncharts@3.0.0`, You can visualize timeseries data easily on react.\n\nLearn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).\n\n### Consider the example below for integration of FusionTime\n\n```javascript\nimport React from 'react';\nimport FusionCharts from 'fusioncharts';\nimport TimeSeries from 'fusioncharts/fusioncharts.timeseries';\nimport ReactFC from 'react-fusioncharts';\n\nReactFC.fcRoot(FusionCharts, TimeSeries);\n\nconst jsonify = res =\u003e res.json();\nconst dataFetch = fetch(\n  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json'\n).then(jsonify);\nconst schemaFetch = fetch(\n  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json'\n).then(jsonify);\n\nclass ChartViewer extends React.Component {\n  constructor(props) {\n    super(props);\n    this.onFetchData = this.onFetchData.bind(this);\n    this.state = {\n      timeseriesDs: {\n        type: 'timeseries',\n        renderAt: 'container',\n        width: '600',\n        height: '400',\n        dataSource: {\n          caption: { text: 'Online Sales of a SuperStore in the US' },\n          data: null,\n          yAxis: [\n            {\n              plot: [\n                {\n                  value: 'Sales ($)'\n                }\n              ]\n            }\n          ]\n        }\n      }\n    };\n  }\n\n  componentDidMount() {\n    this.onFetchData();\n  }\n\n  onFetchData() {\n    Promise.all([dataFetch, schemaFetch]).then(res =\u003e {\n      const data = res[0];\n      const schema = res[1];\n      const fusionTable = new FusionCharts.DataStore().createDataTable(\n        data,\n        schema\n      );\n      const timeseriesDs = Object.assign({}, this.state.timeseriesDs);\n      timeseriesDs.dataSource.data = fusionTable;\n      this.setState({\n        timeseriesDs\n      });\n    });\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        {this.state.timeseriesDs.dataSource.data ? (\n          \u003cReactFC {...this.state.timeseriesDs} /\u003e\n        ) : (\n          'loading'\n        )}\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nUseful links for FusionTime\n\n- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)\n- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)\n\n## Drill Down Component\n\nA custom component to easily add drill down to your react application.\n\n### Syntax\n\n```javascript\nimport FusionCharts from 'fusioncharts';\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport ReactFC from 'react-fusioncharts';\nimport DrillDown from 'react-fusioncharts/components/DrillDown';\nDrillDown.fcRoot(FusionCharts, Charts);\n```\n\n```jsx\nclass MyComponent extends React.Component{\n  constructor(props){\n    super(props);\n    this.plotChildMap = [ 0, 2, 1 ];\n    this.dataSource = /*Data Source A : Given above */   ;\n    this.btnConfig = {text : 'Back'};\n    this.type= 'column2d';\n    this.height = 400;\n    this.width = 400;\n  }\n  render(){\n    return (\n       \u003cDrillDown\n        dataSource={dataSource}\n        plotChildMap={plotChildMap}\n        btnConfig={btnConfig}\n        btnStyle={btnStyle}\n        dataFormat={dataFormat}\n        type={type}\n        height={height}\n        width={width}\n        ...other\n        \u003e\n        \u003cReactFC /\u003e              /* ReactFC as a child */\n        \u003cReactFC /\u003e\n        ...\n        \u003cDrillDown\u003e\u003c/DrillDown\u003e /* DrillDown as a child for next level drill down*/\n      \u003c/DrillDown\u003e\n    )\n  }\n}\n```\n\n#### Attribute Description\n\n- plotChildMap[Array(Number)| Array[Object]]\n\n  - Array ( Number ) - Representation of child mapped to the plot of the parent data source passed to the `DrillDown`\n    component . Array location are considered plot index of parent, the value corresponding to it are considered which child chart to render.\n    `Eg. [0,2,1]`  \n     `0(location) -\u003e 0 (value)` means clicking the first (zero indexed) data plot , render the 0th child ,  \n     `1(location) -\u003e 2(value)` means clicking the second data plot, render the 1st Child (Note: It is 0-indexed )  \n     **Null case** : You can pass `null` for a data plot for which you dont want a drill down.\n  - Array ( Object ) - Representation of child mapped with plot in form of an object of shape  \n    `{ \"plotPosition\": Number, \"childPosition\": Number }`  \n    This object holds information about which child render on a data plot is clicked.  \n    `Eg. [{ plotPosition: 1 , childPosition: 0}, { plotPosition: 0, childPosition: 1}]`  \n    Note: plotChildMap does not honour heterogeneous data , eg. Number and Object\n    both.  \n    `[ 0 , { plotPosition:0, childPosition: 1 } ]`\n\n- btnConfig [Object]- Basic configuration without overriding the default button styles\n  - `text`: PropTypes.string - Button Text\n  - `color`: PropTypes.string\n  - `backgroundColor`: PropTypes.string\n  - `borderColor`: PropTypes.string\n  - `fontSize`: PropTypes.string\n  - `fontWeight`: PropTypes.string\n  - `padding`: PropTypes.string\n  - `fontFamily`: PropTypes.string\n- btnStyle [Object] - CSS styles which override the styles in default btnConfig except `text`.\n\n## Working with APIs\n\nTo call APIs we will need the chart object. To get the chart object for an React-FC component, pass a callback through the attribute `onRender`.\n\nWrite the callback:\n\nAs a separate function:\n\n```javascript\nvar chartRenderCallback  = function (chart) {\n  [Code goes here]\n}\n```\n\nOr, as a component class method:\n\n```javascript\nchartRenderCallback (chart) {\n  [Code goes here]\n}\n```\n\nPass the callback as a prop, to which the chart object will be returned on rendering\n\n```\n\u003cReactFC {...chartConfigs} onRender={chartRenderCallback} /\u003e\n```\n\n##### Consider the example below that conerts a Column 2D chart to a Pie 2D chart after 5 seconds.\n\n```javascript\nimport React, { Component } from 'react';\nimport ReactDOM from 'react-dom';\nimport FusionCharts from 'fusioncharts';\nimport Charts from 'fusioncharts/fusioncharts.charts';\nimport ReactFC from 'react-fusioncharts';\nimport FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';\n\nReactFC.fcRoot(FusionCharts, Charts, FusionTheme);\n\nconst dataSource = /* Data source A given above */;\n\nconst chartConfigs = {\n  type: 'column2d',\n  width: 600,\n  height: 400,\n  dataFormat: 'json',\n  dataSource: dataSource\n};\n\nclass Chart extends Component {\n  // Convert the chart to a 2D Pie chart after 5 secs.\n  alterChart(chart) {\n    setTimeout(() =\u003e {\n      chart.chartType('pie2d');\n    }, 5000);\n  }\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cReactFC {...chartConfigs} onRender={alterChart} /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\u003cChart /\u003e, document.getElementById('root'));\n```\n\nlinks to help you get started:\n\n- [Live samples with code](https://fusioncharts.github.io/react-fusioncharts-component/)\n- [Documentation](https://www.fusioncharts.com/dev/getting-started/react/your-first-chart-using-react)\n- [Use Chart API events \u0026 methods in React](https://www.fusioncharts.com/dev/getting-started/react/configure-your-chart-using-react)\n- [Chart gallery](https://www.fusioncharts.com/explore/chart-gallery)\n- [FusionCharts API](https://www.fusioncharts.com/dev/api/fusioncharts)\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## For Contributors\n\n- Clone the repository and install dependencies\n\n```\n$ git clone https://github.com/fusioncharts/react-fusioncharts-component.git\n$ cd react-fusioncharts-component\n$ npm i\n$ npm start\n```\n\n- Run `npm run build` to start the dev server and point your browser at [http://localhost:3000/](http://localhost:3000/).\n\n## Licensing\n\nThe FusionCharts React integration component is open-source and distributed under the terms of the MIT/X11 License. However, you will need to download and include FusionCharts library in your page separately, which has a [separate license](https://www.fusioncharts.com/buy).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Freact-fusioncharts-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffusioncharts%2Freact-fusioncharts-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffusioncharts%2Freact-fusioncharts-component/lists"}