BUILDER

Features

Developers

Documentation

Pricing

Github

Docs

App

This page was made in Builder!

USER GUIDES

Creating Content

Learning the visual editor

Responsive design tricks

Saving layers as templates

Importing your site pages

Connecting custom data

Interactive pages with state and actions

Creating reusable components with Symbols

Targeting and scheduling content

Building custom forms

How To

Sidebar Menu

Dropdown Menu

Platforms

Shopify

Wordpress

Custom

DEVELOPER GUIDES

Guides

Quick start

SEO optimizing Builder.io content

Creating custom models

Using custom fields

Enable on-site previewing and editing

Dynamic URLs and advanced data fetching

Adding Custom Code

Using 3rd party libraries

Import HTML

Extending Builder.io with plugins

REST API

HTML API

Content API

GraphQL API

Webhooks

Write API

React

Getting started

Using Next.js

Using Gatsby

Using your React components in Builder

New!

Components-only mode

Triggering custom actions

Angular

Ruby on rails

Webcomponents

Github

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.

As a bonus, be sure to check out how to make symbols in Builder, as well as for those if you using React you may want to alternatively pass down library instances their the data={..} prop

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 state.chart, because later we may want to use it for reference to other things. Anything you put on the state 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() {
    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);

    state.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();