Group and stacked bar chart in apex charts react js

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:

   bashCopy code
   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:

   jsxCopy code
   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:

   jsxCopy code
   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: https://apexcharts.com/docs/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.