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 d3-selection
Or, using Yarn:
yarn add britecharts d3-selection
Notice this requires you to have in place a bundling system (Webpack, Parcel, Rollup, Gulp or Grunt). If you want to drop a script in an HTML file and start working, use the CDN way below.
// For AMD and CommonJS modules const selection = require('d3-selection'); const LineChart = require('britecharts/umd/line.min'); // For ES modules import bar from 'britecharts/dist/umd/bar.min';
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/dist/css/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/dist/css/common/common.min.css"> <link type="text/css" rel="stylesheet" href="node_modules/britecharts/dist/css/charts/bar.min.css">
Download from the CDN
To import the latest bundle (2.x.x version), use this URL:
This bundle attaches to the global
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/eventbrite/britecharts.git
Or download the source code by navigating to the Release Page and click in the latest's release
Then, you would need to install the dependencies and build the project. Check the Contributing Guide to learn about this process.
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.