react-apexcharts

What is react-apexcharts?

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.

What are react-apexcharts's main functionalities?

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;

Other packages similar to react-apexcharts

react-chartjs-2

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

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

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.

README

React.js wrapper for ApexCharts to build interactive visualizations in react.

Download and Installation

Installing via npm

npm install react-apexcharts apexcharts

Usage

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, 1999]
        }
      },
      series: [{
        name: 'series-1',
        data: [30, 40, 35, 50, 49, 60, 70, 91, 125]
      }]
    }
  }
  render() {
    return (
      <Chart options={this.state.options} series={this.state.series} 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.setState({
  options: {
    ...this.state.options,
    xaxis: {
      ...this.state.options.xaxis,
      categories: ['X1', 'X2', 'X3']
    }
  }
})

❌ Not this

this.setState({
  options.xaxis.categories: ['X1', 'X2', 'X3']
})

Props

Prop	Type	Description
series	Array	The series is a set of data. To know more about the format of the data, checkout Series docs on the website.
type	String	line, area, bar, pie, donut, scatter, bubble, heatmap, radialBar
width	Number or String	Possible values for width can be 100%, 400px or 400 (by default is 100%)
height	Number or String	Possible values for height can be 100%, 300px or 300 (by default is auto)
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

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

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

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 example
npm install
npm run start

Bundling

To build for Development

npm run dev-build

To build for Production

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.