Apexcharts Brush Chart is not working in react component

Question

I'm using the react apexcharts.Apexcharts when I use the brush chart the chart which through the error. the code is given below with customized data. when using brush charts in my local component I'm facing the error which I have mention after the code

import React, { Component } from "react";
import ReactApexChart from "apexcharts";

class LineChartDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      series: [
        {
          name: "series1",
          data: [31, 40, 28, 51, 42, 109, 100],
        },
      ],
      options: {
        chart: {
          id: "chartyear",
          type: "area",
          height: 160,
          background: "#F6F8FA",
          toolbar: {
            show: false,
            autoSelected: "pan",
          },
          events: {
            mounted: function (chart) {
              var commitsEl = document.querySelector(".cmeta span.commits");
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX
              );

              commitsEl.innerHTML = commits;
            },
            updated: function (chart) {
              var commitsEl = document.querySelector(".cmeta span.commits");
              var commits = chart.getSeriesTotalXRange(
                chart.w.globals.minX,
                chart.w.globals.maxX
              );

              commitsEl.innerHTML = commits;
            },
          },
        },
        colors: ["#FF7F00"],
        stroke: {
          width: 0,
          curve: "smooth",
        },
        dataLabels: {
          enabled: false,
        },
        fill: {
          opacity: 1,
          type: "solid",
        },
        yaxis: {
          show: false,
          tickAmount: 3,
        },
        xaxis: {
          type: "datetime",
        },
      },

      seriesYears: [
        {
          name: "series1",
          data: [31, 40, 28, 51, 42, 109, 100],
        },
      ],
      optionsYears: {
        chart: {
          height: 200,
          type: "area",
          background: "#F6F8FA",
          toolbar: {
            autoSelected: "selection",
          },
          brush: {
            enabled: true,
            target: "chartyear",
          },
          selection: {
            enabled: true,
            xaxis: {
              min: new Date("26 Jan 2014").getTime(),
              max: new Date("29 Mar 2015").getTime(),
            },
          },
        },
        colors: ["#7BD39A"],
        dataLabels: {
          enabled: false,
        },
        stroke: {
          width: 0,
          curve: "smooth",
        },
        fill: {
          opacity: 1,
          type: "solid",
        },
        legend: {
          position: "top",
          horizontalAlign: "left",
        },
        xaxis: {
          type: "datetime",
        },
      },
    };
  }

  render() {
    debugger;
    return (
      <div id="wrapper">
        <div id="chart-months">
          <ReactApexChart
            options={this.state.options}
            series={this.state.series}
            type="area"
            height={160}
          />
        </div>

        <h5 class="github-style">
          <img
            class="userimg"
            src="https://picsum.photos/200/200/?image=1031"
            data-hovercard-user-id="634573"
            alt=""
            width="38"
            height="38"
          />
          <div class="userdetails">
            <a class="username">coder</a>
            <span class="cmeta">
              <span class="commits"></span> commits
            </span>
          </div>
        </h5>

        <div id="chart-years">
          <ReactApexChart
            options={this.state.optionsYears}
            series={this.state.seriesYears}
            type="area"
            height={200}
          />
        </div>
      </div>
    );
  }
}

export default LineChartDemo;

it through the following error

Uncaught TypeError: Cannot call a class as a function

Am i using the right way of apexcharts intregation in my react component..?

Answer 1

You're importing the wrong library.

First, you have to install apexcharts and react-apexcharts

npm install --save react-apexcharts apexcharts

but while importing, you should use the following

import ReactApexChart from "react-apexcharts";