Get new jQuery plugins just once a week



February 9, 2015

TauCharts | D3 based javascript charting library.

TauCharts is a javascript charting library. It is based on D3 framework and Grammar of Graphics concepts.

TauCharts has perfect visual design, it is flexible and powerful and can be extended with plugins.

TauCharts has been built based on three rules:

  1. Graphical design is imporant, so we design everything with passion.
  2. Simple charts are easy to create, complex charts are not easy, but possible.
  3. Flexibility is important. Plugins framework should be powerful.

Example html

<link rel="stylesheet" type="text/css" href="//">
<div id='line'>
<script src="//" charset="utf-8"></script> <script src="//" type="text/javascript"></script> <script src="//" type="text/javascript"></script>

Example js

var datasource = [{
  type:'us', count:20, date:'12-2013'
  type:'us', count:10, date:'01-2014'
  type:'bug', count:15, date:'02-2014'
  type:'bug', count:23, date:'05-2014'
var chart = new tauChart.Chart({ data: datasource, type: 'line', x: 'date', y: 'count', color: 'type' // there will be two lines with different colors on the chart });

Created by Visual management software



TauCharts js lib


Taucharts Build Status Coverage Status Code Climate

Slack Status

NPM downloads

Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion.

Official website:
Project blog:

Why use Taucharts?


Data plays a key role in Taucharts. The library provides a declarative interface for fast mapping of data fields to visual properties.


The library's architecture allows you to build facets and extend chart behaviour with reusable plugins.


The Taucharts team is passionate about beautiful design.


Dive into the high-level Taucharts concepts and usage reviews. If you want to contribute - see how to run the project locally

How to use Taucharts

Using Taucharts with a CDN

Load JavaScript dependencies

<script src="//" charset="utf-8"></script>
<script src="//" type="text/javascript"></script>

Include a CSS file, as well

<link rel="stylesheet" type="text/css" href="//">

Downloading Taucharts using Bower

bower install taucharts

Downloading Taucharts using npm

npm install taucharts

Below are some popular usage scenarios. For more examples, see our experimental sample page.

Scatter plot

var chart = new Taucharts.Chart({
    type   : 'scatterplot',
    x      : 'Cycle Time',
    y      : 'SUM(Bugs Count)',
    color  : 'Team',
    size   : 'Sum(User Stories Count)',
    data   : [{'Cycle Time': 186, 'SUM(Bugs Count)': 34, 'Team': 'HDP'...}, ...],
    plugins: [


See scatter plot documentation

Line chart

var chart = new Taucharts.Chart({
    type : 'line',
    y    : 'Y Scale',
    x    : 'X Scale',
    color: 'Team',
    size : 'Effort',
    label: 'Effort',
    data : [{'Team': 'Alpha', 'Effort': 40, 'Y Scale': 23, 'X Scale': 72 }, ...]

Line Chart

See line chart documentation

Bar chart

var chart = new Taucharts.Chart({
    type : 'bar',
    x    : 'team',
    y    : 'effort',
    color: 'priority',
    data : [{'team': 'd', 'effort': 1, 'count': 1, 'priority': 'low'}, ...]

Bar Chart

See bar chart documentation

Horizontal bar chart

var chart = new Taucharts.Chart({
    type : 'horizontal-bar',
    x    : 'count',
    y    : 'team',
    color: 'priority',
    data : [{'team': 'alpha', 'effort': 8, 'priority': 'major'}, ...]

Horizontal Bar Chart

See horizontal bar chart documentation

Stacked bar chart

var chart = new Taucharts.Chart({
    type : 'stacked-bar',
    x    : 'age',
    y    : ['count', 'sport'],
    color: 'country',
    data : [{country: 'Canada', sport: 'Biathlon', medals: 20, age: 22}, ...]

Stacked Bar Chart

See stacked bar chart documentation

Horizontal stacked bar chart

var chart = new Taucharts.Chart({
    type : 'horizontal-stacked-bar',
    y    : 'process',
    x    : 'count',
    color: 'stage',
    data : [{process: 'sales', stage: 'visit', count: 100}, ...]

Horizontal Stacked Bar Chart

See horizontal stacked bar chart documentation

Stacked area chart

var chart = new Taucharts.Chart({
    type : 'stacked-area',
    y    : 'effort',
    x    : 'date',
    color: 'team',
    guide: {
        interpolate: 'smooth'
    data : [{date: '2015-07-15', effort: 400, team: 'Alpha'}, ...]

Horizontal Stacked Bar Chart

See stacked area chart documentation

Facet chart

var chart1 = new Taucharts.Chart({
  type : 'scatterplot',
  x    : ['milespergallon'],
  y    : ['class', 'price'],
  color: 'class',
  data : [{class: "C", milespergallon: 41.26, price: 24509.74, vehicle: "Prius1"}, ...]

Facet scatterplot chart

See facet charts documentation

Data Streaming

var chart1 = new Taucharts.Chart({
    type : 'line',
    x    : 'x',
    y    : 'y',
    color: 'type',

Streaming Data Chart

This sample uses the [setData(..)] method to refresh the chart's data source.

See streaming sample online

Complex Composable charts

Composable Chart

See composable chart sample online

Migrating from Taucharts v1 to v2

How to run the project locally

Clone (forked) repository:

git clone

Initialize dependencies:

npm install

Run local webpack dev server (with hot reload):

npm start

Local server will be started on port 9000 and live taucharts assembly will be exposed by url:


Now you can see some taucharts examples:


To run tests (with hot reload):

npm run devtest

To build a static assembly:

npm run build

This command creates development and production assemblies in a [./dist] folder.

See the Developer Guide for more info.

Taucharts examples / usage reviews

R Wrapper

SqlPad Project

Targetprocess Graphical Reports

Vizydrop project

Taucharts Twitter channel

Taucharts demo page

GeoTremor mobile app


Dex integration video


Licensing: Apache License, Version 2.0

Have questions? Contact us


Related posts:


To install using Bower
bower install tauCharts

TauCharts js lib

jQuery plugin

Sign up for our weekly newsletter.

* We won't spam you ever
Couple Gift Ideas