render() {
    // main method
    return new Promise((resolve, reject) => {
      // only draw chart, if element found
      if (Utils.elementExists(this.el)) {
        if (typeof Apex._chartInstances === 'undefined') {
          Apex._chartInstances = []
        }
        if (this.w.config.chart.id) {
          Apex._chartInstances.push({
            id: this.w.globals.chartID,
            group: this.w.config.chart.group,
            chart: this,
          })
        }

        // set the locale here
        this.setLocale(this.w.config.chart.defaultLocale)
        const beforeMount = this.w.config.chart.events.beforeMount
        if (typeof beforeMount === 'function') {
          beforeMount(this, this.w)
        }

        this.events.fireEvent('beforeMount', [this, this.w])
        window.addEventListener('resize', this.windowResizeHandler)
        addResizeListener(this.el.parentNode, this.parentResizeHandler)

        let rootNode = this.el.getRootNode && this.el.getRootNode()
        let inShadowRoot = Utils.is('ShadowRoot', rootNode)
        let doc = this.el.ownerDocument
        let css = inShadowRoot
          ? rootNode.getElementById('apexcharts-css')
          : doc.getElementById('apexcharts-css')

        if (!css) {
          css = document.createElement('style')
          css.id = 'apexcharts-css'
          css.textContent = apexCSS
          const nonce = this.opts.chart?.nonce || this.w.config.chart.nonce
          if (nonce) {
            css.setAttribute('nonce', nonce)
          }

          if (inShadowRoot) {
            // We are in Shadow DOM, add to shadow root
            rootNode.prepend(css)
          } else {
            // Add to <head> of element's document
            doc.head.appendChild(css)
          }
        }

        let graphData = this.create(this.w.config.series, {})
        if (!graphData) return resolve(this)
        this.mount(graphData)
          .then(() => {
            if (typeof this.w.config.chart.events.mounted === 'function') {
              this.w.config.chart.events.mounted(this, this.w)
            }

            this.events.fireEvent('mounted', [this, this.w])
            resolve(graphData)
          })
          .catch((e) => {
            reject(e)
            // handle error in case no data or element not found
          })
      } else {
        reject(new Error('Element not found'))
      }
    })
  }
The primary method user will call to render the chart.