BUILDER

Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Home

Forum

Blog

Github

Login

Signup

This page was made in Builder!

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.

👉Tip: if you use our React SDK you can also use the data and context props to pass libraries, data, and functions down to your Builder content

Prerequisites

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.

JS

HTML

// npm install systemjs
// Using imports requires modern JS or using a bundler like webpack. 
// Alternatively you can use the HTML option instead 
import 'systemjs/dist/s.min.js'

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:

System.import(`https://cdn.builder.io/systemjs/chart.js`)

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:

System.import(`https://cdn.builder.io/systemjs/chart.js’).then(data => { })

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:

const Chart = data.default;

We can also use async await here. To do so, we can replace:

system.import('https://cdn.builder.io/systemjs/chart.js')

With:

async function main() {
const data = await System.import('https://cdn.builder.io/systemjs/chart.js');
const Chart = data.default;
main();

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:

const el = ref.element;

ref is the reference to the component. Now, lets create the canvas element and insert this as well:

const canvas = document.createElement('canvas');

el.querySelector('.chart').appendChild(canvas);

Now, you should see the chart appear on your page!

For reference, find the code from our example below:

async function main() {
  if (Builder.isBrowser) {
    const data = await System.import('https://cdn.builder.io/systemjs/chart.js');
    const Chart = data.default;

    const el = ref.element;
    const canvas = document.createElement('canvas');
    el.querySelector('.chart').appendChild(canvas);

    context.chart = new Chart(canvas, {
        type: 'line',
        data: {
            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
            datasets: [{
                label: 'My First dataset',
                backgroundColor: 'rgb(255, 99, 132)',
                borderColor: 'rgb(255, 99, 132)',
                data: [0, 10, 5, 2, 20, 30, 45]
            }]
        },
    });
  }
}

main();

Up next

Import HTML
Was this article helpful?