react-apexcharts
React.js wrapper for ApexCharts to build interactive visualizations in react.
Download and Installation
Installing via npm
Usage
To create a basic bar chart with minimal configuration, write as follows:
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
Props
-
series -
Array
(required)
The series is an array which accepts object in the following format
series: [{
name: 'visitors'
data: [23, 44, 56, 75, 56]
}]
Thedata
property inside series accepts a variation of formats. To know more about the format of dataSeries, checkout Series docs on the website. -
type -
String
(required)
chart type, possible values :line
area
bar
pie
donut
scatter
bubble
heatmap
radialBar
-
width -
Number
||String
Possible values for width can be
100%
or400px
or just 400 -
height -
Number
||String
Possible values for width can be
100%
or300px
or just 300 -
options -
Object
Charts's 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
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
Running the example
Basic example including update is included to show how to get started using ApexCharts with React easily.
To run the examples,
Bundling
Issues
Recently, some users faced an issue while bundling their app along with React-ApexCharts.
If you get such an error, please get the latest version of React-ApexCharts >= 1.0.4 and try to compile your app again.