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="//cdn.jsdelivr.net/npm/[email protected]/build/d3.min.js" charset="utf-8"></script>
<script src="//cdn.jsdelivr.net/npm/taucharts@1/build/production/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@1/build/production/tauCharts.min.css">bower install tauchartsnpm install tauchartsBelow 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
Clone (forked) repository:
git clone https://github.com/TargetProcess/tauCharts.git
Initialize dependencies:
npm install
Run local webpack dev server (with hot reload):
npm run devserver
Local server will be started on port 9500 and live taucharts assembly will be exposed by url:
http://localhost:9500/tauCharts.js
Now you can see some taucharts examples:
http://localhost:9500/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 [./build] folder.
Targetprocess Graphical Reports
Licensing: Apache License, Version 2.0
Have questions? Contact us