ApexSensei

Charts

Load third-party chart code from a static resource with loadScript. Lightning Web Security blocks many older builds.

Load it from a static resource

A chart library is third-party JavaScript. Download a current build, upload it as a static resource, and import the URL from @salesforce/resourceUrl. Call loadScript from lightning/platformResourceLoader.

Put lwc:dom="manual" on an empty element the library will write into. Load the script once from renderedCallback, behind a guard the template does not read, so the hook does not loop.

Lightning Web Security

Lightning Web Security blocks or distorts APIs that older chart builds still call. A file that works on a static HTML page can fail in an org where LWS is on. Check the build in the LWS Distortion Viewer before you depend on it.

Salesforce does not support the third-party script. If a base component or an AppExchange product already draws the chart, use that.

This page stops here

There is no chart on this page. The snippet shows the load, and it does not configure a charting library.

Example

javascript

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

export default class StageChart extends LightningElement {
  started = false;

  renderedCallback() {
    if (this.started) {
      return;
    }
    this.started = true;
    loadScript(this, chartLib);
  }
}