iKizmet forked version of the React.js wrapper for ApexCharts to build interactive visualizations in react.
Download and Installation
Installing via npm
npm install react-apexcharts apexcharts
Usage
To create a basic bar chart with minimal configuration, write as follows:
{ superprops; thisstate = options: chart: id: 'apexchart-example' xaxis: categories: 1991 1992 1993 1994 1995 1996 1997 1998 series: name: 'series-1' data: 30 40 45 50 49 60 70 91 } { return <Chart options=thisstateoptions series=thisstateseries type="bar" width=500 height=320 /> }
This will render the following chart
How do I update the chart?
Simple! Just change the series
or any option
and it will automatically re-render the chart.
View this example on codesandbox
Important: While updating the options, make sure to update the outermost property even when you need to update the nested property.
✅ Do this
this
❌ Not this
this
Props
Prop | Type | Description |
---|---|---|
series | Array | The series is an array which accepts object in the following format. To know more about the format of dataSeries, checkout Series docs on the website. |
type | String | line , area , bar , pie , donut , scatter , bubble , heatmap , radialBar |
width | Number/String | Possible values for width can be 100% or 400px or 400 |
height | Number/String | Possible values for width can be 100% or 300px or 300 |
options | Object | The configuration object, see options on API (Reference) |
How to call methods of ApexCharts programatically?
Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on ApexCharts
global variable directly
Example
ApexCharts
More info on the .exec()
method can be found here
All other methods of ApexCharts can be called this way
What's included
The repository includes the following files and directories.
react-apexcharts/
├── dist/
│ ├── react-apexcharts.min.js
│ └── react-apexcharts.js
└── example/
│ ├── src/
│ ├── public/
│ ├── package.json
│ └── REAMDE.md
└── src/
└── react-apexcharts.jsx
Development
Install dependencies
npm install
Running the example
Basic example including update is included to show how to get started using ApexCharts with React easily.
To run the examples,
cd examplenpm installnpm run start
Bundling
npm run build
License
React-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.