JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Tau Charts

    D3 based data-focused charting library. Designed with passion. Flexible.
    Filed under 

    • 🔾51%Overall
    • 1,906
    • 15.5 days
    • 🕩120
    • 👥7

    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="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')()
        ]
    });
    

    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

    Show All