Installations
npm install kafkas-react-apexcharts
Developer Guide
Typescript
Yes
Module System
CommonJS
Node Version
14.18.1
NPM Version
8.1.0
Score
67
Supply Chain
97.2
Quality
74.1
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
validate.email š
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Download Statistics
Total Downloads
1,091
Last Day
1
Last Week
6
Last Month
10
Last Year
174
Bundle Size
4.64 kB
Minified
1.89 kB
Minified + Gzipped
Package Meta Information
Latest Version
6.0.1
Package Id
kafkas-react-apexcharts@6.0.1
Unpacked Size
22.87 kB
Size
8.14 kB
File Count
19
NPM Version
8.1.0
Node Version
14.18.1
Total Downloads
Cumulative downloads
Total Downloads
1,091
Last Day
0%
1
Compared to previous day
Last Week
0%
6
Compared to previous week
Last Month
-66.7%
10
Compared to previous month
Last Year
-16.3%
174
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Peer Dependencies
2
Dev Dependencies
24
React.js wrapper for ApexCharts to build interactive visualizations in react.
Download and Installation
Installing via npm
1npm install react-apexcharts apexcharts
Usage
1import Chart from 'react-apexcharts'
To create a basic bar chart with minimal configuration, write as follows:
1class App extends Component { 2 constructor(props) { 3 super(props); 4 5 this.state = { 6 options: { 7 chart: { 8 id: 'apexchart-example' 9 }, 10 xaxis: { 11 categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999] 12 } 13 }, 14 series: [{ 15 name: 'series-1', 16 data: [30, 40, 35, 50, 49, 60, 70, 91, 125] 17 }] 18 } 19 } 20 render() { 21 return ( 22 <Chart options={this.state.options} series={this.state.series} type="bar" width={500} height={320} /> 23 ) 24 } 25}
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
1this.setState({ 2 options: { 3 ...this.state.options, 4 xaxis: { 5 ...this.state.options.xaxis, 6 categories: ['X1', 'X2', 'X3'] 7 } 8 } 9})
ā Not this
1this.setState({ 2 options.xaxis.categories: ['X1', 'X2', 'X3'] 3})
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 programmatically?
Sometimes, you may want to call other methods of the core ApexCharts library, and you can do so on ApexCharts
global variable directly
Example
1ApexCharts.exec('reactchart-example', 'updateSeries', [{ 2 data: [40, 55, 65, 11, 23, 44, 54, 33] 3}])
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
ā āāā README.md
āāā src/
āāā react-apexcharts.jsx
Development
Install dependencies
1npm 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,
1cd example 2npm install 3npm run start
Bundling
To build for Development
1npm run dev-build
To build for Production
1npm 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.

No vulnerabilities found.

No security vulnerabilities found.