taucharts

Data-focused charting library based on D3

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
taucharts
2.8.04 years ago9 years agoMinified + gzip package size for taucharts in KB

Popular Searches

Readme

Taucharts Build Status Coverage Status Code Climate
Slack Status
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')
    ]
});
Scatterplot
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

  • 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