import React from 'react';
import ApexCharts from 'apexcharts';

class ChartComponent extends React.Component {
  constructor(props) {
    super(props);
    this.chartRef = React.createRef();
  }

  componentDidMount() {
    this.renderChart();
  }

  renderChart() {
    const options = {
      chart: {
        type: 'bar',
      },
      series: [{
        name: 'Series 1',
        data: [30, 40, 45, 50, 49, 60, 70, 91],
      }],
      dataLabels: {
        enabled: true,
        style: {
          colors: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', '#00FFFF', '#000000', '#FFFFFF'],
        },
      },
    };

    const chart = new ApexCharts(this.chartRef.current, options);
    chart.render();
  }

  render() {
    return <div ref={this.chartRef}></div>;
  }
}

export default ChartComponent;

import React from 'react';
import ChartComponent from './ChartComponent';

function App() {
  return (
    <div>
      <h1>React ApexCharts Example</h1>
      <ChartComponent />
    </div>
  );
}

export default App;