Taucharts

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

Official website: www.taucharts.com

Documentation: api.taucharts.com

Project blog: blog.taucharts.com

Why use Taucharts?

Simplicity

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

Flexibility

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

Design

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="//cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js" type="text/javascript"></script>

Include a CSS file, as well

<link rel="stylesheet" type="text/css" href=//cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">

NOTE: taucharts@2 is compatible with D3 v4 and v5. Use taucharts@1 if you work with obsolete D3 versions.

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: [
        Taucharts.api.plugins.get('legend'),
        Taucharts.api.plugins.get('tooltip')
    ]
});

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 }, ...]
});

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'}, ...]
});

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'}, ...]
});

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}, ...]
});

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}, ...]
});

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'}, ...]
});

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"}, ...]
});

See facet charts documentation

Data Streaming

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

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

See streaming sample online

Complex Composable charts

See composable chart sample online

Migrating from Taucharts v1 to v2

• D3 v4 is now dependency.
• Taucharts global object name (was tauCharts).
• .tau-chart__ CSS class prefix (was.graphical-report__).
• export-to plugin alias changed (was exportTo).
• Distributive files paths changed. dist/taucharts.min.js and dist/taucharts.min.css contain the core and all the plugins minified together. dist/taucharts.js and dist/taucharts.css contain unfinified core, JS and CSS for plugins can be found in dist/plugins/ folder (e.g. to import a plugin you should do something like import tooltip from 'taucharts/dist/plugins/tooltip';).

How to run the project locally

Clone (forked) repository:

git clone https://github.com/TargetProcess/taucharts.git

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:

http://localhost:9000/dist/taucharts.js

Now you can see some taucharts examples:

http://localhost:9000/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

Dex integration video

License

Licensing: Apache License, Version 2.0

Have questions? Contact us

2.8.0 (feb 26, 2020)

• add possibility to use functions in tickFormat

2.7.4 (jul 17, 2019)

• fix blinking and shaking of axis labels during re-renders of chart #580

  2.7.3 (may 31, 2019)

• preserve padding values during auto layout, even if user has hidden x or y guide (@rDr4g0n in #575)

  2.7.2 (april 22, 2019)

• fix performance for measure dates on very old dates #573

2.7.1 (march 14, 2019)

• return support IE11

2.7.0 (march 8, 2019)

• improve tooltip plugin. Add onExclude event.
• update dependencies

2.6.5 (february 8, 2019)

• stretch area annotation to first or last ticks if min or max values are skipped

2.6.4 (december 27, 2018)

• fix stretching of vertical annotation

2.6.3 (september 24, 2018)

• fix xss vulnerability in legend plugin

2.6.2 (september 20, 2018)

• fix xss vulnerability on tick size detection

2.6.1 (september 8, 2018)

• fix amd build for plugins

2.6.0 (september 1, 2018)

• add support d3 v5
• now user can set rotate guide params for x dimensions both with auto layout spec #550
• add event type for onSelect legend plugin settings #550

2.5.1 (august 19, 2018)

• return color brewer addon to package #547

2.5.0 (august 18, 2018)

• add new settings for legend plugin (onSelect handler and selectedCategories) #545

2.4.0 (august 15, 2018)

• add posibility set field bounds for quick filter #543

2.3.2 (june 25, 2018)

• fix diff tooltip #534

2.3.1 (june 18, 2018)

• improve multiple labels #533

2.3.0 (june 5, 2018)

• fix ticks positioning in case annotation adds new ticks #532
• allow override default tickFormatter #532

2.2.3 (may 16, 2018)

• fix tick position for vertical facet #530

2.2.2 (may 11, 2018)

changed

• improve cutting facet label logic #528

fixed

• order for dates in Color legend when scale is periodic #528

2.2.1 (may 4, 2018)

changed

• multiline label improvements #526

2.2.0 (april 26, 2018)

changed

• Added clickable entry to tooltip plugin settings (@nayrrod in #523)
• Multiline labels support (using lineBreak and lineBreakSeparator flags for label guide #525

fixed

• default TypeScript export definition to conform to version 2.6.0 rules (@tyronedougherty in #520)

2.1.0 (march 21, 2018)

changed

• place Y facets labels at top-left under facet cell
• place Y axis label at top, X axis label at right

2.0.3 (march 11, 2018)

fixed

• animation when tooltip disappears

2.0.2 (february 28, 2018)

fixed

• fix build bundle #514

2.0.1 (february 20, 2018)

fixed

• trendline plugin applies only for chart element #513
• fixed generating data refs for trendline plugins #513

2.0.0 (january 31, 2018)

Breaking Changes

• D3 v4 is now dependency.
• Taucharts global object name (was tauCharts).
• .tau-chart__ CSS class prefix (was.graphical-report__).
• export-to plugin alias changed (was exportTo).
• Distributive files paths changed. dist/taucharts.min.js and dist/taucharts.min.css contain the core and all the plugins minified together. dist/taucharts.js and dist/taucharts.css contain unfinified core, JS and CSS for plugins can be found in dist/plugins/ folder (e.g. to import a plugin you should do something like import tooltip from 'taucharts/dist/plugins/tooltip';).

early release