To reference a JavaScript library that you’ve uploaded as a static resource, use a <ltng:require> tag in your .cmp or .appmarkup.
The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded. Don't use the init event to access scripts loaded by <ltng:require>. These scripts load asynchronously and are most likely not available when the initevent handler is called
Lets have a look at the basic initialization of external chart librarbies in Lightning using Chart JS
1) Import Chart JS min bundle or get the latest from chart js site ans save it into static resource
2) Create a lighting component bundle and app as shown below sample code.
Demo App:
Component:
ControllerJS:
ApexClass:
The afterScriptsLoaded action in the client-side controller is called after the scripts are loaded. Don't use the init event to access scripts loaded by <ltng:require>. These scripts load asynchronously and are most likely not available when the initevent handler is called
Lets have a look at the basic initialization of external chart librarbies in Lightning using Chart JS
1) Import Chart JS min bundle or get the latest from chart js site ans save it into static resource
2) Create a lighting component bundle and app as shown below sample code.
Demo App:
Component:
ControllerJS:
ApexClass: