React.js wrapper for ApexCharts to build interactive visualizations in react.
\n\n
\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 \n )\n }\n}\n```\n\nThis will render the following chart\n
\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
\n\nView this example on codesandbox\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 an array which accepts object in the following format. To know more about the format of dataSeries, checkout [Series](https://apexcharts.com/docs/series/) docs on the website. |\n| **type** | String | `line`, `area`, `bar`, `pie`, `donut`, `scatter`, `bubble`, `heatmap`, `radialBar` |\n| **width** | Number/String | Possible values for width can be `100%` or `400px` or 400 |\n| **height** | Number/String | Possible values for width can be `100%` or `300px` or 300 |\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 here\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","readmeFilename":"README.md"}
![](\"https://apexcharts.com/media/react-apexcharts.png\")
![\"License\"](\"https://img.shields.io/badge/License-MIT-brightgreen.svg\"){kind=icon}
\n ![\"build\"](\"https://api.travis-ci.com/apexcharts/react-apexcharts.svg?branch=master\")
\n ![\"ver\"](\"https://img.shields.io/npm/v/react-apexcharts.svg\")
\n![](\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\")
\n![](\"https://apexcharts.com/media/apexcharts-banner.png\")
![](\"https://apexcharts.com/media/first-bar-chart.svg\")
![](\"https://apexcharts.com/media/react-chart-updation.gif\")