Chart.js – integration


Aura

<ltng:require scripts="{!join(',', $Resource.ChartJS, $Resource.ChartCSS)}" 
              afterScriptsLoaded="{!c.init}"/>


Lightning Web Component

  • in order to load third party library we need to use loadScript and loadStyle methods
import { loadScript, loadStyle } from 'lightning/platformResourceLoader';

import chartJS from '@salesforce/resourceUrl/chartJS';
import chartCSS from '@salesforce/resourceUrl/chartCSS';
  • create promise to load resources
  • style injection must be turned off before creating the first chart
Promise.all([
    loadScript(this, chartJS),
    loadStyle(this, chartCSS)])
.then(() => {
    //disable automatic style injection
    window.Chart.platform.disableCSSInjection = true;

    //your code here
})
.catch(error => {
    alert(error);
});