- Download Chart.min.js and Chart.min.css (source Chart.js – Installation).
- Add both files as Static Resources (Setup -> Custom Code -> Static Resources -> New)
- Import resources inside component
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);
});