Lwc with ApexChart.js

Question

Does anyone know an example of how to use apexchart.js library in LWC, or how to make a Stacked Bar

ApexChart

HTML file

<template>
  <div class="c-container">
     <div data-id="apexchart" lwc:dom="manual"></div>
  </div>
</template>

JS File

import { LightningElement } from 'lwc';
import ApexChartsLib from '@salesforce/resourceUrl/ApexCharts';
import { loadScript } from 'lightning/platformResourceLoader';

export default class TestCmp extends LightningElement {

chart;
renderedCallback(){
      
    var options = {
        series: [{
        name: 'Marine Sprite',
        data: [44, 55, 41, 37, 22, 43, 21]
      }, {
        name: 'Striking Calf',
        data: [53, 32, 33, 52, 13, 43, 32]
      }, {
        name: 'Tank Picture',
        data: [12, 17, 11, 9, 15, 11, 20]
      }, {
        name: 'Bucket Slope',
        data: [9, 7, 5, 8, 6, 9, 4]
      }, {
        name: 'Reborn Kid',
        data: [25, 12, 19, 32, 25, 24, 10]
      }],
        chart: {
        type: 'bar',
        height: 350,
        stacked: true,
        stackType: '100%'
      },
      plotOptions: {
        bar: {
          horizontal: true,
        },
      },
      stroke: {
        width: 1,
        colors: ['#fff']
      },
      title: {
        text: '100% Stacked Bar'
      },
      xaxis: {
        categories: [2008, 2009, 2010, 2011, 2012, 2013, 2014],
      },
      tooltip: {
        y: {
          formatter: function (val) {
            return val + "K"
          }
        }
      },
      fill: {
        opacity: 1
      
      },
      legend: {
        position: 'top',
        horizontalAlign: 'left',
        offsetX: 40
      }
      };

    Promise.all([
        loadScript(this, ApexChartsLib)
    ]).then(() => {
        console.log('LIBRARY: ' + ApexChartsLib);
        const canvas = document.createElement("canvas");
        const chartNode = this.template.querySelector('[data-id="apexchart"]');
        chartNode.innerHTML = "";
        chartNode.appendChild(canvas);
        const ctx = canvas.getContext("2d");
        this.chart = new window.ApexCharts(ctx, options);
        this.chart.render();
    }).catch(error => {
        console.log('ERROR: ' + error.message);
    });
}

}

Answer 1

Unzip apexcharts-bundle.zip and you find a reference to ResizeObserver (line 30664 of apexchart.js). This is not supported by the Locker API. You can make this work by replacing Locker by the brand new "Lightning Web Security" however, which is in Beta:

Setup - Security - Session Settings - Lightning Web Security (Beta)

Assuming you have markup like this:

<template>
    <lightning-card title="ApexChart.js" icon-name="custom:custom1">
        <div class="chart slds-var-m-around_medium" lwc:dom="manual"></div>
    </lightning-card>
</template>

And assuming you uploaded the zip file:

import { loadScript } from 'lightning/platformResourceLoader';
import apexchartJs from '@salesforce/resourceUrl/apexchartJs';

In the renderedCallback you do:

loadScript(this, apexchartJs + '/dist/apexcharts.js')
.then(() => {
        const div = this.template.querySelector('.chart');
        const chart = new ApexCharts(div, this.options);
        chart.render();
    })
    .catch((error) => {
        console.error('Failed: ' + error);
    });

This will render you the Stacked Bars chart.