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="https://cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script>
<script src="https://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="https://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 }, ...]
});
Bar chart
var chart = new Taucharts.Chart({
type : 'bar',
x : 'team',
y : 'effort',
color: 'priority',
data : [{'team': 'd', 'effort': 1, 'count': 1, 'priority': 'low'}, ...]
});
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.
Complex Composable charts
See composable chart sample online
Migrating from Taucharts v1 to v2
- D3 v4 is now dependency.
Taucharts
global object name (wastauCharts
)..tau-chart__
CSS class prefix (was.graphical-report__
).export-to
plugin alias changed (wasexportTo
).- Distributive files paths changed.
dist/taucharts.min.js
anddist/taucharts.min.css
contain the core and all the plugins minified together.dist/taucharts.js
anddist/taucharts.css
contain unfinified core, JS and CSS for plugins can be found indist/plugins/
folder (e.g. to import a plugin you should do something likeimport 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
Targetprocess Graphical Reports
License
Licensing: Apache License, Version 2.0
Have questions? Contact us