5

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

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);
    });
}

}

7
  • Have you tried to utilize one of the numerous tutorials regarding Chart.js, e.g. this and apply it to ApexChart? Feb 10 at 15:47
  • Yes, I've tried it, but it doesn't work Feb 10 at 15:51
  • ApexChart.js has a render function that doesn't work -> var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); Feb 10 at 15:53
  • 1
    It would be helpful to edit what you've tried, code you may have attempted, and any specific issues/errors you've encountered. Feb 10 at 16:17
  • 1
    Okay, I put the code I'm using above Feb 10 at 17:12

1 Answer 1

3

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.

1
  • 1
    Thank you very much! I actually had to enable 'Lightning Web Security' and I had just uploaded the js file, but the correct thing is to upload the whole zip, thanks again, it made all the difference. Feb 11 at 17:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.