Apexcharts

This document contains the walkthrough to convert an ApexChart class component to a functional component.

Available examples

• Most available examples on the Apexcharts website are written in the Class component style.
• According the coding standard for GQC, components are only developed in the functional style.

Procedure to convert (from class to functional)

More comprehensive examples can be found on StackOverFlow.

Consider the example, (example taken from: Link)

   class ApexChart extends React.Component {
        constructor(props) {
          super(props);

          this.state = {

            series: [{
                name: "Desktops",
                data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            }],
            options: {
              chart: {
                height: 350,
                type: 'line',
                zoom: {
                  enabled: false
                }
              },
              dataLabels: {
                enabled: false
              },
              stroke: {
                curve: 'straight'
              },
              title: {
                text: 'Product Trends by Month',
                align: 'left'
              },
              grid: {
                row: {
                  // takes an array which will be repeated on columns
                  colors: ['#f3f3f3', 'transparent'],
                  opacity: 0.5
                },
              },
              xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
                  'Jun', 'Jul', 'Aug', 'Sep'],
              }
            },
          };
        }
        render() {
          return (
            <div id="chart">
              <ReactApexChart options={this.state.options}
              series={this.state.series} type="line" height={350} />
            </div>
          );
        }
   }

• All data is stored in the this.state variable. To convert it into a functional component, extract the contents of this.state and declare const in the function.

export default function Apexcharts() {
  const chartData = {
    series: [{
                name: "Desktops",
                data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
            }],
            options: {
              chart: {
                height: 350,
                type: 'line',
                zoom: {
                  enabled: false
                }
              },
              dataLabels: {
                enabled: false
              },
              stroke: {
                curve: 'straight'
              },
              title: {
                text: 'Product Trends by Month',
                align: 'left'
              },
              grid: {
                row: {
                  // takes an array which will be repeated on columns
                  colors: ['#f3f3f3', 'transparent'],
                  opacity: 0.5
                },
              },
              xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May',
                  'Jun', 'Jul', 'Aug', 'Sep'],
              }
            },
  };
  return (
    <Card title="ApexCharts">
      <Box>
      <ReactApexChart options={chartData.options} series={chartData.series} />;
      </Box>
    </Card>
  );
}