Using 3rd party libraries in Builder content
Using 3rd party libraries in Builder content enables tons of powerful options. Learn how to integrate Chart.js into a Builder component below.
This guide requires using System.js. If you use Builder hosting, our Shopify app, Webcomponents, Angular SDK or our HTML API this is included for you by default. For any other SDK you need to load SystemJS yourself, e.g.
Loading 3rd party libraries
We are going to go over how to use 3rd party JS libraries in Builder. We’re going to start by using Chart.js. If you go to the chart.js site, you’ll see they have a library for rendering any type of data in line charts, pie charts, etc. Were going to make a Builder component/Builder page using this. We can do this pretty easily using a couple of steps. Navigate to the chart.js site. We will need a couple of things. First, the installation guide. We will need the npm installation for this. We will also be taking a snippet of code from their example to use later.
Now, navigate back to Builder. Open the custom CSS/JS section. We can use system.js to import any node.js or browser package that is an npm right here in Builder. We can start by entering:
Builder provides you an API that allows you to take any npm package and will host it for you as a system.js module. This is a promise, so we will need to add:
Some modules might export one thing, some might export multiple things. If its only one thing exported (in the case of chart.js), we need to get it as data.default:
We can also use async await here. To do so, we can replace:
This is more friendly if you are importing multiple things. Now that we have this, lets go back and look at the example. Lets copy their code that includes the new chart, and paste it into our Builder code. Now, we are going to change
var chart to
context.chart, because later we may want to use it for reference to other things. Anything you put on the
context object can be used elsewhere for on clicks, data binding, etc.
For context it wants a canvas element. Lets go into our page and add a box. Go down in the styles tab, and were going to give this box a class name of “chart”. Now lets go back to our code and add:
ref is the reference to the component. Now, lets create the canvas element and insert this as well:
Now, you should see the chart appear on your page!
For reference, find the code from our example below: