To create a group and stacked bar chart in ApexCharts with React.js, you can use the ApexCharts library along with React. Here's a step-by-step guide to creating a group and stacked bar chart:

  1. Install Dependencies: Start by installing the required dependencies for ApexCharts and React:

    npm install apexcharts react-apexcharts
  2. Create the React Component: Create a new React component to render the chart. For example, create a file named BarChart.js:

    import React from 'react'; import ReactApexChart from 'react-apexcharts'; const BarChart = () => { // Sample data for the chart const data = { categories: ['Category 1', 'Category 2', 'Category 3'], series: [ { name: 'Series A', data: [44, 55, 41] }, { name: 'Series B', data: [35, 41, 65] }, { name: 'Series C', data: [53, 32, 34] }, ], }; // ApexCharts options const options = { chart: { type: 'bar', stacked: true, }, xaxis: { categories: data.categories, }, plotOptions: { bar: { horizontal: false, }, }, legend: { position: 'top', }, }; return ( <ReactApexChart options={options} series={data.series} type="bar" height={400} /> ); }; export default BarChart;
  3. Use the Component: Import the BarChart component into your main application file (e.g., App.js) and use it to render the chart:

    import React from 'react'; import BarChart from './BarChart'; const App = () => { return ( <div> <h1>Group and Stacked Bar Chart</h1> <BarChart /> </div> ); }; export default App;
  4. Styling and Customization (Optional): You can further customize the chart by adjusting the options object in the BarChart.js file. ApexCharts provides extensive configuration options for styling, axis, legends, tooltips, and more. Refer to the ApexCharts documentation for a complete list of available options:

By following these steps, you should have a working group and stacked bar chart in your React.js application using ApexCharts. The chart will display multiple series grouped together and stacked within each group, creating a visually informative representation of the data.

Have questions or queries?
Get in Touch