Chart Tool

Chart Tool is a platform for creating, storing and displaying beautiful, responsive embeddable charts. Designed to fit the needs of a fast-paced mobile and print newsroom, Chart Tool generates charts in several formats:

SVGs that are both responsive and interactive, via an embed code
JPGs and PNGs for use as thumbnails and sharing on social media
PDFs that can be almost immediately dropped into a print content management system

Chart Tool interface GIF

How it works
Features
Examples and demo
Getting started
Tutorials
Version
License
Get in touch

How it works

Chart Tool is made up of two parts:

A back end interface for storing data, creating and exporting charts, and generating a static embed code, powered by Meteor and React. Embed codes are static by design — if your back end goes down, all the charts on your site will still display properly. Try out a demo of the charts interface.

A front-end JavaScript and CSS library that parses embed codes generated by the back end and renders a responsive chart on your website using parts of D3.js. The front-end library also offers an API that can be accessed to modify charts before or after they've been drawn. Check out some example charts on our website.

Features

Searchable database: All charts are stored in a searchable, taggable database for easy retrieval
Simple, straightforward GUI: Easy-to-use (and easy-to-teach!) collaborative interface for editing charts, so multiple people can work on the same chart at once
Asset generation: Easily generate PNGs at any size for use on social media, or PDFs for print use
Fallback images: All charts come with a fallback image in case the library is unable to draw the chart. Fallbacks can be stored on AWS, or bundled as inline Base64 images
Fully responsive: Charts will redraw automatically on window resize
Lots of chart types:
- Line charts
- Area charts
- Stacked area charts
- Column charts
- Stacked column charts
- Bar charts
- Stacked bar charts
- Multiline charts
- Scatterplots
- No pies (sorry)
Annotations: All charts can be annotated with text annotations, pointer arrows, highlighting a range along the x- or y-axis, or highlighting a bar or column.
Highly configurable: Don't want tips to appear for a specific chart, or want to manually set the number of ticks to be displayed? No problem!
"Ordinal-time" scales: Treat time series data as if it were ordinal — this is very useful for visualizing stock price charts, or when you want to skip weekends and holidays
Pre- and post-render hooks: All charts come with several basic custom events via D3's dispatch library, including pre- and post-render hooks for every chart
Zero external dependencies: The Chart Tool library comes bundled with everything it'll need right out of the box
Lightweight libraries: The front-end CSS and JS libraries clock in at a combined 45.536kB minified and gzipped

Examples and demo

Examples of the types of charts Chart Tool can generate can be found here.

For a demo of the back end interface used to generate charts, images and PDFs, check out our demo app.

Getting started

Curious to try out Chart Tool, but don't want to go through the process of setting it up? Try out our hosted demo version.

First, you'll need Node.js 8.11 installed. We recommend using nvm to keep your Node version in sync with what Chart Tool expects. This is important: anything lower and Meteor will fail in spectacular and unexpected ways.

Next, you'll need to install Meteor.

You'll also need Gulp.

$ npm install -g gulp

Then, clone the Chart Tool repo and install your NPM dependencies for both the root project and the backend, which will make sure Gulp is set up and can run your project:

$ git clone [git-repo-url] && cd chart-tool
$ npm install

After that, you'll need to do cd meteor && meteor to get Meteor running for the first time, which provisions the Mongo database and installs all the dependencies it'll need (this might take a minute). Once that's done, you're in business. Stop the Meteor server (CTRL-C on a Mac) and cd back to the parent directory.

Then, all you need to do is:

$ gulp

That's it! You're running your own development copy of Chart Tool! :tada: :tada: :tada:

Tutorials

Now that you've got Chart Tool up and running, here are some tips on how to get rolling.

For starters, you might want to read up on how to make your first chart. A full tutorial, including how to embed it on the web or generate a static image at multiple sizes is available here.

Otherwise, these are some other tutorials you might want to check out: