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
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
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.
bower install taucharts
npm install taucharts
Below are some popular usage scenarios. For more examples, see our experimental sample page.
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
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 }, ...]
});
var chart = new Taucharts.Chart({
type : 'bar',
x : 'team',
y : 'effort',
color: 'priority',
data : [{'team': 'd', 'effort': 1, 'count': 1, 'priority': 'low'}, ...]
});
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
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
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
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
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
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 composable chart sample online
- 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';
).
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.
Targetprocess Graphical Reports
Licensing: Apache License, Version 2.0
Have questions? Contact us