Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
react-apexcharts
Advanced tools
The react-apexcharts package is a React wrapper for ApexCharts, a modern charting library that helps developers create interactive and responsive charts. It supports a wide range of chart types and provides extensive customization options.
Line Chart
This code demonstrates how to create a basic line chart using react-apexcharts. The chart displays data points over a series of years.
import React from 'react';
import Chart from 'react-apexcharts';
const LineChart = () => {
const options = {
chart: {
id: 'basic-line'
},
xaxis: {
categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]
}
};
const series = [
{
name: 'series-1',
data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
}
];
return <Chart options={options} series={series} type="line" height={350} />;
};
export default LineChart;
Bar Chart
This code demonstrates how to create a basic bar chart using react-apexcharts. The chart displays data points for each month.
import React from 'react';
import Chart from 'react-apexcharts';
const BarChart = () => {
const options = {
chart: {
id: 'basic-bar'
},
xaxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']
}
};
const series = [
{
name: 'series-1',
data: [30, 40, 45, 50, 49, 60, 70, 91, 125]
}
];
return <Chart options={options} series={series} type="bar" height={350} />;
};
export default BarChart;
Pie Chart
This code demonstrates how to create a basic pie chart using react-apexcharts. The chart displays the distribution of data among different teams.
import React from 'react';
import Chart from 'react-apexcharts';
const PieChart = () => {
const options = {
labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
};
const series = [44, 55, 13, 43, 22];
return <Chart options={options} series={series} type="pie" height={350} />;
};
export default PieChart;
react-chartjs-2 is a React wrapper for Chart.js, a popular charting library. It offers a wide range of chart types and is known for its simplicity and ease of use. Compared to react-apexcharts, react-chartjs-2 may have fewer customization options but is often preferred for its straightforward API.
Recharts is a composable charting library built on React components. It provides a variety of chart types and is highly customizable. Recharts is known for its declarative approach, making it easy to create complex charts. Compared to react-apexcharts, Recharts offers more flexibility in terms of component composition.
Victory is a modular charting library for React and React Native. It offers a wide range of chart types and is highly customizable. Victory is known for its robust API and extensive documentation. Compared to react-apexcharts, Victory provides more advanced features and is suitable for complex data visualizations.
React.js wrapper for ApexCharts to build interactive visualizations in react.
import Chart from 'react-apexcharts'
To create a basic bar chart with minimal configuration, write as follows:
class App extends Component {
constructor(props) {
super(props);
this.state = {
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]
}]
}
}
render() {
return (
<Chart options={this.state.options} series={this.state.series} type="bar" width={500} height={320} />
)
}
}
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
series - Array
(required)
The series is an array which accepts object in the following format
series: [{
name: 'visitors'
data: [23, 44, 56, 75, 56]
}]
The data
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%
or 400px
or just 400
height - Number
|| String
Possible values for width can be 100%
or 300px
or just 300
options - Object
Charts's 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
Apexcharts.exec('reactchart-example', 'updateSeries', [{
data: [40, 55, 65, 11, 23, 44, 54, 33]
}])
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
npm install
Basic example including update is included to show how to get started using ApexCharts with React easily.
To run the examples,
cd example
npm install
npm run start
npm run build
Recently, some users faced an issue while bundling their app along with React-ApexCharts.
Failed to minify the code from this file:
./node_modules/react-apexcharts/dist/react-apexcharts.js
If you get such an error, please get the latest version of React-ApexCharts >= 1.0.4 and try to compile your app again.
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.
FAQs
React.js wrapper for ApexCharts
The npm package react-apexcharts receives a total of 83,861 weekly downloads. As such, react-apexcharts popularity was classified as popular.
We found that react-apexcharts demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.