{"id":13517753,"url":"https://github.com/zingchart/zingchart-react","last_synced_at":"2025-04-06T08:14:44.813Z","repository":{"id":34884064,"uuid":"38901633","full_name":"zingchart/zingchart-react","owner":"zingchart","description":"Quickly create dynamic JavaScript charts with ZingChart \u0026 React.","archived":false,"fork":false,"pushed_at":"2024-09-23T21:31:08.000Z","size":8465,"stargazers_count":91,"open_issues_count":6,"forks_count":24,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-27T15:14:01.670Z","etag":null,"topics":["charts","javascript","react"],"latest_commit_sha":null,"homepage":"https://www.zingchart.com/docs/integrations/react","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/zingchart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2015-07-10T20:53:19.000Z","updated_at":"2024-04-14T14:37:34.000Z","dependencies_parsed_at":"2023-01-15T10:01:10.526Z","dependency_job_id":"70fac20e-c149-4d2f-b66b-3c65e5b69f7c","html_url":"https://github.com/zingchart/zingchart-react","commit_stats":{"total_commits":95,"total_committers":15,"mean_commits":6.333333333333333,"dds":0.7578947368421053,"last_synced_commit":"090f89b0aa7ea4a663ccfdf945a9c2ee22cc129f"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingchart%2Fzingchart-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingchart","download_url":"https://codeload.github.com/zingchart/zingchart-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247451667,"owners_count":20940944,"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","javascript","react"],"created_at":"2024-08-01T05:01:37.041Z","updated_at":"2025-04-06T08:14:44.791Z","avatar_url":"https://github.com/zingchart.png","language":"JavaScript","readme":"![](https://img.shields.io/npm/v/zingchart-react)\n![](https://github.com/zingchart/zingchart-react/workflows/Build/badge.svg?branch=master)\n![](https://github.com/zingchart/zingchart-react/workflows/Test/badge.svg?branch=master)\n![](https://img.shields.io/npm/dw/zingchart-react)\n\n![](https://img.shields.io/david/zingchart/zingchart-react)\n![](https://img.shields.io/david/peer/zingchart/zingchart-react)\n![](https://img.shields.io/david/dev/zingchart/zingchart-react)\n\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n[![](https://github.com/zingchart/zingchart-react/blob/master/zingchart-demo.gif?raw=true)](https://codesandbox.io/s/zingchart-react-wrapper-example-dxfc9)\n\n## Quickstart Guide\n\nQuickly add charts to your React application with our ZingChart component\n\nThis guide assumes some basic working knowledge of React and jsx.\n\n\n## 1. Install\n\nInstall the `zingchart` package via npm\n\n`npm install zingchart`\n\nInstall the `zingchart-react` package via npm\n\n`npm install zingchart-react`\n\n## 2. Include the `zingchart` package in your project\n\nThe `zingchart` package is a **DIRECT** dependency of `zingchart-react` but you can also update this package outside of this component. Meaning the wrapper is no longer tied to a ZingChart library version, but just the component itself.\n\nYou can import the library like so:\n\n```javascript\n// import the es6 version\nimport 'zingchart/es6';\n```\n\n## 3. Include the component in your project \n\nYou can either include the zingchart-react component to your project via UMD or modules (recommended).\n\n\n### Modules (recommended)\n```js\nimport 'zingchart/es6';\nimport ZingChart from 'zingchart-react';\n```\n\nYou must **EXPLICITLY IMPORT MODULE CHARTS**. The modules are \nwrapped as a closure an eval statement so there is **NO** default\nexport objects. Just import them.\n\n```js\nimport 'zingchart/es6';\nimport ZingChart from 'zingchart-react';\n// EXPLICITLY IMPORT MODULE from node_modules\nimport \"zingchart/modules-es6/zingchart-maps.min.js\";\nimport \"zingchart/modules-es6/zingchart-maps-usa.min.js\";\n```\n\n### UMD\n\nIn your main html file, include the package as a script include.\n```html\n\u003cscript src=\"/path/to/zingchart.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/path/to/zingchart-react.js\"\u003e\u003c/script\u003e\n```\n\n### `zingchart` Global Object\n\nIf you need access to the `window.zingchart` objects for licensing or development flags or any top level \nvariables for other modules like `zingchart.loadGeoJSON()`. This is all exposed by importing the library as \nthe `zingchart` variable with `import zingchart from 'zingchart/es6'`.\n\n```javascript\nimport zingchart from 'zingchart/es6';\nimport ZingChart from 'zingchart-react';\n\n// zingchart object for performance flags\nzingchart.DEV.KEEPSOURCE = 0; // prevents lib from storing the original data package\nzingchart.DEV.COPYDATA = 0; // prevents lib from creating a copy of the data package \n\n// ZC object for license key\nzingchart.LICENSE = ['abcdefghijklmnopqrstuvwxy'];\n```\n\n## Usage\n\nUse the newly imported `ZingChart` component in your markup.\n\n### Using class components:\n\n```jsx\nimport React, {Component} from 'react';\nimport zingchart from 'zingchart/es6';\nimport ZingChart from 'zingchart-react';\n/* Additional imports and settings as needed, see above */\n\nclass Simple extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      config: {\n        type: 'bar',\n        series: [{\n          values: [4,5,3,4,5,3,5,4,11]\n        }]\n      }\n    }\n  }\n  render() {\n    return (\n      \u003cdiv \u003e\n        \u003cZingChart data={this.state.config}/\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default Simple;\n```\n\n### Using function components:\n\n```jsx\nimport React, {useState} from 'react';\nimport 'zingchart/es6';\nimport ZingChart from 'zingchart-react';\n/* Additional imports and settings as needed, see above */\n\nfunction Simple() {\n  const [config] = useState({\n    type: 'bar',\n    series: [{\n      values: [4,5,3,4,5,3,5,4,11]\n    }]\n  })\n\n\treturn \u003cZingChart data={config} /\u003e\n}\n\nexport default Simple;\n```\n\n## Parameters\n\nThe properties, or parameters, you can pass to the `\u003czingchart\u003e` tag itself.\n\n\n### data [object]\n\n```jsx\n\nconst myData = {\n    type: 'line',\n    series: [\n      { values: [1,2,4,5,6] }\n    ]\n};\n\n\u003czingchart data={myData}\u003e\u003c/zingchart\u003e\n```\n\n### `id` [string] (optional)\nThe id for the DOM element for ZingChart to attach to. If no id is specified, the id will be autogenerated in the form of zingchart-react-#\n\n### `series` [array] (optional)\nAccepts an array of series objects, and overrides a series if it was supplied into the config object. Varries by chart type used - Refer to the ZingChart documentation for more details.\n\n\n```jsx\nconst myData = {\n    type: 'line',\n};\n\nconst mySeries = [\n  { values: [1,2,4,5,6] }\n];\n\n\u003czingchart data={myData} series={mySeries}\u003e\u003c/zingchart\u003e\n\n```\n\n### `width` [string or number] (optional)\n\nThe width of the chart. **Defaults to 100%**.\n\n### `height` [string or number] (optional)\n\nThe height of the chart. **Defaults to 480px**.\n\n### `theme` [object] (optional)\n\nThe theme or 'defaults' object defined by ZingChart. More information available here: https://www.zingchart.com/docs/api/themes\n\n### modules [string] (optional)\nThe modules object to load additional modules. More information available here: https://www.zingchart.com/docs/api/zingchart-modules#modules-list\n\n### `output` [string] (optional)\n\nThe render type of the chart. **The default is `svg`** but you can also pass the string `canvas` to render the charts in canvas. \n\nNote: All other properties that are added as a prop will be added to the render object. This allows for settings such as 'customprogresslogo' to be set. Any unrecognized properties will be ignored.\n\n## Events\nAll zingchart events are readily available on the component to listen to. For example, to listen for the 'complete' event when the chart is finished rendering:\n\n```jsx\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      config: {\n        type: 'line',\n        series: [{\n          values: [4,5,3,4,5,3,5,4,11]\n        }]\n      }\n    }\n    this.chartDone = this.chartDone.bind(this);\n  }\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cZingChart data={this.state.config} complete={this.chartDone}/\u003e\n      \u003c/div\u003e\n    );\n  }\n  chartDone(event) {\n    console.log(`Event \"Complete\" - The chart is rendered\\n`);\n  }\n}\n```\n\nFor a list of all the events that you can listen to, refer to the complete documentation on https://www.zingchart.com/docs/api/events\n\n\n### Methods\n\nAll zingchart methods are readily available on the component's instance to call. For example, to add a new plot node to the chart:\n\n```jsx\nclass App extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      config: {\n        type: 'bar',\n        series: [{\n          values: [4,5,3,4,5,3,5,4,11]\n        }]\n      }\n    };\n    this.chart = React.createRef();\n    this.addPlot = this.addPlot.bind(this);\n\n  }\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cZingChart ref={this.chart} data={this.state.config}/\u003e\n        \u003cbutton onClick={this.addPlot}\u003eAddPlot\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n  addPlot() {\n    this.chart.current.addplot({\n      data: {\n        values: [5,3,3,5,6,4,3,4,6],\n        text: \"My new plot\"\n      }\n    });\n  }\n}\n\n```\n\nFor a list of all the methods that you can call and the parameters each method can take, refer to the complete documentation on https://www.zingchart.com/docs/api/methods\n\n## Working Example\n\nSee https://github.com/zingchart-demos/zingchart-react-demo for a demo based on \"Create React App\" that shows this component in action.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingchart%2Fzingchart-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingchart%2Fzingchart-react/lists"}