title: Apexcharts Brush Chart is not working in react component
body: <p>I'm using the react apexcharts.<a href="https://apexcharts.com/react-chart-demos/line-charts/brush-chart/" rel="nofollow noreferrer">Apexcharts</a> 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</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import ReactApexChart from &quot;apexcharts&quot;;
  
  class LineChartDemo extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        series: [
          {
            name: &quot;series1&quot;,
            data: [31, 40, 28, 51, 42, 109, 100],
          },
        ],
        options: {
          chart: {
            id: &quot;chartyear&quot;,
            type: &quot;area&quot;,
            height: 160,
            background: &quot;#F6F8FA&quot;,
            toolbar: {
              show: false,
              autoSelected: &quot;pan&quot;,
            },
            events: {
              mounted: function (chart) {
                var commitsEl = document.querySelector(&quot;.cmeta span.commits&quot;);
                var commits = chart.getSeriesTotalXRange(
                  chart.w.globals.minX,
                  chart.w.globals.maxX
                );
  
                commitsEl.innerHTML = commits;
              },
              updated: function (chart) {
                var commitsEl = document.querySelector(&quot;.cmeta span.commits&quot;);
                var commits = chart.getSeriesTotalXRange(
                  chart.w.globals.minX,
                  chart.w.globals.maxX
                );
  
                commitsEl.innerHTML = commits;
              },
            },
          },
          colors: [&quot;#FF7F00&quot;],
          stroke: {
            width: 0,
            curve: &quot;smooth&quot;,
          },
          dataLabels: {
            enabled: false,
          },
          fill: {
            opacity: 1,
            type: &quot;solid&quot;,
          },
          yaxis: {
            show: false,
            tickAmount: 3,
          },
          xaxis: {
            type: &quot;datetime&quot;,
          },
        },
  
        seriesYears: [
          {
            name: &quot;series1&quot;,
            data: [31, 40, 28, 51, 42, 109, 100],
          },
        ],
        optionsYears: {
          chart: {
            height: 200,
            type: &quot;area&quot;,
            background: &quot;#F6F8FA&quot;,
            toolbar: {
              autoSelected: &quot;selection&quot;,
            },
            brush: {
              enabled: true,
              target: &quot;chartyear&quot;,
            },
            selection: {
              enabled: true,
              xaxis: {
                min: new Date(&quot;26 Jan 2014&quot;).getTime(),
                max: new Date(&quot;29 Mar 2015&quot;).getTime(),
              },
            },
          },
          colors: [&quot;#7BD39A&quot;],
          dataLabels: {
            enabled: false,
          },
          stroke: {
            width: 0,
            curve: &quot;smooth&quot;,
          },
          fill: {
            opacity: 1,
            type: &quot;solid&quot;,
          },
          legend: {
            position: &quot;top&quot;,
            horizontalAlign: &quot;left&quot;,
          },
          xaxis: {
            type: &quot;datetime&quot;,
          },
        },
      };
    }
  
    render() {
      debugger;
      return (
        &lt;div id=&quot;wrapper&quot;&gt;
          &lt;div id=&quot;chart-months&quot;&gt;
            &lt;ReactApexChart
              options={this.state.options}
              series={this.state.series}
              type=&quot;area&quot;
              height={160}
            /&gt;
          &lt;/div&gt;
  
          &lt;h5 class=&quot;github-style&quot;&gt;
            &lt;img
              class=&quot;userimg&quot;
              src=&quot;https://picsum.photos/200/200/?image=1031&quot;
              data-hovercard-user-id=&quot;634573&quot;
              alt=&quot;&quot;
              width=&quot;38&quot;
              height=&quot;38&quot;
            /&gt;
            &lt;div class=&quot;userdetails&quot;&gt;
              &lt;a class=&quot;username&quot;&gt;coder&lt;/a&gt;
              &lt;span class=&quot;cmeta&quot;&gt;
                &lt;span class=&quot;commits&quot;&gt;&lt;/span&gt; commits
              &lt;/span&gt;
            &lt;/div&gt;
          &lt;/h5&gt;
  
          &lt;div id=&quot;chart-years&quot;&gt;
            &lt;ReactApexChart
              options={this.state.optionsYears}
              series={this.state.seriesYears}
              type=&quot;area&quot;
              height={200}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default LineChartDemo;
  
  </code></pre>
  <p>it through the following error</p>
  <p><strong>Uncaught TypeError: Cannot call a class as a function</strong></p>
  <p>Am i using the right way of apexcharts intregation in my react component..?</p>