Skip to main content

Installing Britecharts

In the Getting Started Guide you saw how to use Britecharts using a CDN link. This is not the only way. Britecharts allows developers to add the library following several strategies.

In this tutorial, you will learn to install Britecharts in your project by using different approaches:

  • Using the Node Package Manager (NPM) or Yarn
  • Using the CDN links
  • Building the Source Code

Install with NPM​

The recommended way of installing Britecharts is to use NPM or Yarn:

npm install --save #britecharts/core d3-selection

Or, using Yarn:

yarn add @britecharts/core d3-selection

Notice this requires you to have in place a bundling system (Webpack, Parcel, Rollup, or Similar). If you want to drop a script in an HTML file and start working, use the CDN way below.

To use the modules within your JavaScript code, you will follow a different approach depending on the type of modules you are using:

// For CommonJS modules
const selection = require('d3-selection');
const BarChart = require('@britecharts/core');

// For ES modules
import bar from '@britecharts/core';

When loading the styles, you have two options, loading the whole stylesheet of the library:

<link type="text/css" rel="stylesheet" href="node_modules/@britecharts/core/**dist/styles/bundle/britecharts.min.css">

Or loading only the styles for the current chart plus the common Britecharts styles:

<link type="text/css" rel="stylesheet" href="node_modules/@britecharts/core/**dist/styles/charts/common.min.css">
<link type="text/css" rel="stylesheet" href="node_modules/@britecharts/core/**dist/styles/charts/bar.min.css">

Download from the CDN​

To import the latest bundle (3.x.x version), use this URL:

https://cdn.jsdelivr.net/npm/@britecharts/core**@2/dist/bundled/britecharts.min.js

This bundle attaches to the global window object a JavaScript object called britecharts. Within it, you can find the charts and helpers you need.

With Britecharts, you can also download individual bundles of the charts and helpers. To do this, you can browse all CDN files, browsing inside the umd folder to find the chart URL you need.

You can see the CDN links in action in:

Building the source code​

To build the soure code, you need first to get the code. You can do it by cloning or downloading it from Github.com. You can clone the git repository by running:

   git clone https://github.com/britecharts/britecharts.git

Or download the source code by navigating to the Release Page and click in the latest's release zip or tar.gz links.

Then, you would need to install the dependencies and build the project. Check the Contributing Guide to learn about this process.

Summary​

In this tutorial, you have seen three different ways of adding Britecharts to your site or web application.

To keep on learning more about Britecharts, you can follow our Composing Your First Data Visualization or our Styling Britecharts tutorials. You can also check out our documentation Homepage and our kitchen sink to see all the available charts.

If you are excited about Britecharts, want to add more configurable properties or even create your own chart, please check our Contributing Guide. In it, we walk you through the development environment setup, running our docs and demos and creating new Pull Requests.