D3 based data-focused charting library. Designed with passion. Flexible.
Taucharts is a data-focused JavaScript charting library based on D3 and designed with passion.
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
Taucharts
global object name (was tauCharts
)..tau-chart__
CSS class prefix (was.graphical-report__
).export-to
plugin alias changed (was exportTo
).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';
).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