How to use apexcharts - 6 common examples

componentDidUpdate(prevProps) {
    const props = this.props;
    
    if (JSON.stringify(prevProps.options) !== JSON.stringify(props.options) || JSON.stringify(prevProps.series) !== JSON.stringify(this.props.series)) {
      const newOptions = {
        chart: {
          type: props.type ? props.type : 'line',
          width: props.width ? props.width : '100%',
          height: props.height ? props.height : 'auto'
        },
        series: props.series
      }
  
      const config = ApexCharts.merge(props.options, newOptions);
  
      // series is not changed,but options are changed
      if (JSON.stringify(props.series) === JSON.stringify(prevProps.series)) {
        this.state.chart.updateOptions(config)
      }
      // options are not changed, just the series is changed
      else if (JSON.stringify(props.options) === JSON.stringify(prevProps.options)) {
        this.state.chart.updateSeries(props.series)
  
      // both maybe changed
      } else {
        this.state.chart.updateOptions(config)
      }
    }
  }

componentDidMount() {
    const newOptions = {
      chart: {
        type: this.props.type ? this.props.type : 'line',
        height: this.props.height ? this.props.height : 'auto',
        width: this.props.width ? this.props.width : '100%'
      },
      series: this.props.series
    }

    const config = ApexCharts.merge(this.props.options, newOptions);
    const chart = new ApexCharts(this.chartRef.current, config)
    chart.render().then(() => {
      this.setState({
        chart
      })
    })
  }

const newOptions = {
        chart: {
          type: this.type || this.options.chart.type || 'line',
          height: this.height,
          width: this.width,
          events: {}
        },
        series: this.series
      }

      Object.keys(this.$listeners).forEach((evt) => {
        newOptions.chart.events[evt] = this.$listeners[evt];
      });

      const config = this.extend(this.options, newOptions);
      this.chart = new ApexCharts(this.$el, config)
      return this.chart.render()
    },
    isObject(item) {

}
    if (this.title) {
      options.title = this.title;
    }
    if (this.subtitle) {
      options.subtitle = this.subtitle;
    }
    if (this.theme) {
      options.theme = this.theme;
    }

    if (this.chartObj) {
      this.chartObj.destroy();
    }

    this.chartObj = new ApexCharts(this.chartElement.nativeElement, options);

    this.render();
  }

componentDidMount() {
    const newOptions = {
      chart: {
        type: this.props.type ? this.props.type : 'line',
        height: this.props.height ? this.props.height : 'auto',
        width: this.props.width ? this.props.width : '100%'
      },
      series: this.props.series
    }

    const config = ApexCharts.merge(this.props.options, newOptions);
    const chart = new ApexCharts(this.chartRef.current, config)
    chart.render().then(() => {
      this.setState({
        chart
      })
    })
  }

componentDidMount () {
    const current = React.createRef ? this.chartRef.current : this.chartRef
    this.chart = new ApexCharts(current, this.getConfig())
    this.chart.render()
  }