{"id":13401210,"url":"https://github.com/apexcharts/react-apexcharts","last_synced_at":"2025-05-15T21:08:00.449Z","repository":{"id":37396630,"uuid":"145422226","full_name":"apexcharts/react-apexcharts","owner":"apexcharts","description":"📊 React Component for ApexCharts","archived":false,"fork":false,"pushed_at":"2024-03-28T11:31:27.000Z","size":4582,"stargazers_count":1260,"open_issues_count":281,"forks_count":144,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-04-15T07:23:08.958Z","etag":null,"topics":["apexcharts","charts","react","react-charts","reactjs","visualizations"],"latest_commit_sha":null,"homepage":"https://apexcharts.com","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/apexcharts.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":"2018-08-20T13:36:46.000Z","updated_at":"2024-05-02T05:25:07.620Z","dependencies_parsed_at":"2024-02-04T16:20:19.241Z","dependency_job_id":"db20fb07-a6c0-488d-b379-3f6085140142","html_url":"https://github.com/apexcharts/react-apexcharts","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/apexcharts%2Freact-apexcharts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/apexcharts","download_url":"https://codeload.github.com/apexcharts/react-apexcharts/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254422764,"owners_count":22068678,"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":["apexcharts","charts","react","react-charts","reactjs","visualizations"],"created_at":"2024-07-30T19:00:59.855Z","updated_at":"2025-05-15T21:07:59.882Z","avatar_url":"https://github.com/apexcharts.png","language":"JavaScript","funding_links":[],"categories":["Data Visualization","Uncategorized","JavaScript","Packages","React [🔝](#readme)","Charts and Maps"],"sub_categories":["Uncategorized"],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\"https://apexcharts.com/media/react-apexcharts.png\"\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/apexcharts/react-apexcharts/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/License-MIT-brightgreen.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/apexcharts/react-apexcharts\"\u003e\u003cimg src=\"https://api.travis-ci.com/apexcharts/react-apexcharts.svg?branch=master\" alt=\"build\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-apexcharts\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-apexcharts.svg\" alt=\"ver\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=React-ApexCharts%20A%20React.js%20Chart%20library%20built%20on%20ApexCharts.js\u0026url=https://www.apexcharts.com\u0026hashtags=javascript,charts,react.js,react,apexcharts\"\u003e\u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\"\u003e \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003eReact.js wrapper for \u003ca href=\"https://github.com/apexcharts/apexcharts.js\"\u003eApexCharts\u003c/a\u003e to build interactive visualizations in react.\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\u003ca href=\"https://apexcharts.com/react-chart-demos/\"\u003e\u003cimg src=\"https://apexcharts.com/media/apexcharts-banner.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\n## Download and Installation\n\n##### Installing via npm\n\n```bash\nnpm install react-apexcharts apexcharts\n```\n\n## Usage\n\n```js\nimport Chart from 'react-apexcharts'\n```\n\nTo create a basic bar chart with minimal configuration, write as follows:\n```javascript\nclass App extends Component {\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      options: {\n        chart: {\n          id: 'apexchart-example'\n        },\n        xaxis: {\n          categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]\n        }\n      },\n      series: [{\n        name: 'series-1',\n        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]\n      }]\n    }\n  }\n  render() {\n    return (\n      \u003cChart options={this.state.options} series={this.state.series} type=\"bar\" width={500} height={320} /\u003e\n    )\n  }\n}\n```\n\nThis will render the following chart\n\u003cp align=\"center\"\u003e\u003ca href=\"https://apexcharts.com/javascript-chart-demos/column-charts/\"\u003e\u003cimg src=\"https://apexcharts.com/media/first-bar-chart.svg\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n### How do I update the chart?\nSimple! Just change the `series` or any `option` and it will automatically re-render the chart.\n\u003cp align=\"center\"\u003e\u003ca href=\"https://codesandbox.io/s/mzzq3yqjqj\"\u003e\u003cimg src=\"https://apexcharts.com/media/react-chart-updation.gif\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nView this example on \u003ca href=\"https://codesandbox.io/s/mzzq3yqjqj\"\u003ecodesandbox\u003c/a\u003e\n\n\n**Important:** While updating the options, make sure to update the outermost property even when you need to update the nested property.\n\n✅ Do this\n```javascript\nthis.setState({\n  options: {\n    ...this.state.options,\n    xaxis: {\n      ...this.state.options.xaxis,\n      categories: ['X1', 'X2', 'X3']\n    }\n  }\n})\n```\n\n❌ Not this\n```javascript\nthis.setState({\n  options.xaxis.categories: ['X1', 'X2', 'X3']\n})\n```\n\n\n## Props\n\n\n| Prop        | Type           | Description  |\n| ------------- |-------------| -----|\n| **series** | `Array` | The series is a set of data. To know more about the format of the data, checkout [Series docs](https://apexcharts.com/docs/series/) on the website. |\n| **type** | `String`  | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar` |\n| **width** | `Number or String`  | Possible values for width can be `100%`, `400px` or `400` (by default is `100%`) |\n| **height** | `Number or String` | Possible values for height can be `100%`, `300px` or `300` (by default is `auto`) |\n| **options** | `Object` | The configuration object, see options on [API (Reference)](https://apexcharts.com/docs/options/chart/type/) |\n\n## How to call methods of ApexCharts programmatically?\nSometimes, you may want to call other methods of the core ApexCharts library, and you can do so on `ApexCharts` global variable directly\n\nExample\n```js\nApexCharts.exec('reactchart-example', 'updateSeries', [{\n  data: [40, 55, 65, 11, 23, 44, 54, 33]\n}])\n```\nMore info on the `.exec()` method can be found \u003ca href=\"https://apexcharts.com/docs/methods/#exec\"\u003ehere\u003c/a\u003e\n\nAll other methods of ApexCharts can be called this way\n\n## What's included\n\nThe repository includes the following files and directories.\n\n```\nreact-apexcharts/\n├── dist/\n│   ├── react-apexcharts.min.js\n│   └── react-apexcharts.js\n└── example/\n│   ├── src/\n│   ├── public/\n│   ├── package.json\n│   └── README.md\n└── src/\n    └── react-apexcharts.jsx\n```\n\n## Development\n\n#### Install dependencies\n\n```bash\nnpm install\n```\n\n## Running the example\n\nBasic example including update is included to show how to get started using ApexCharts with React easily.\n\nTo run the examples,\n```bash\ncd example\nnpm install\nnpm run start\n```\n\n#### Bundling\n\n##### To build for Development\n\n```bash\nnpm run dev-build\n```\n\n##### To build for Production\n\n```bash\nnpm run build\n```\n\n## License\n\nReact-ApexCharts is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Freact-apexcharts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fapexcharts%2Freact-apexcharts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fapexcharts%2Freact-apexcharts/lists"}