Gathering detailed insights and metrics for react-apexcharts-dbc
Gathering detailed insights and metrics for react-apexcharts-dbc
npm install react-apexcharts-dbc
Typescript
Module System
Node Version
NPM Version
Verify real, reachable, and deliverable emails with instant MX records, SMTP checks, and disposable email detection.
Total Downloads
1,043
Last Day
1
Last Week
2
Last Month
9
Last Year
111
Minified
Minified + Gzipped
Latest Version
0.1.1
Package Id
react-apexcharts-dbc@0.1.1
Unpacked Size
172.80 kB
Size
47.23 kB
File Count
12
NPM Version
5.6.0
Node Version
8.11.3
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
100%
2
Compared to previous week
Last Month
12.5%
9
Compared to previous month
Last Year
13.3%
111
Compared to previous year
React.js wrapper for ApexCharts to build interactive visualizations in react.
1npm install react-apexcharts apexcharts
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] 12 } 13 }, 14 series: [{ 15 name: 'series-1', 16 data: [30, 40, 45, 50, 49, 60, 70, 91] 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
Simple! Just change the series
or any option
and it will automatically re-render the chart.
View this example on codesandbox
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) |
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
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
1npm install
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
1npm run build
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.