Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/TargetProcess/tauCharts/llms.txt

Use this file to discover all available pages before exploring further.

Taucharts is a data-focused JavaScript charting library built on D3. It gives you a declarative API for mapping data fields to visual properties — axes, color, size, and shape — and a plugin system for extending behaviour without modifying the core library. This guide walks you through creating and rendering a scatterplot from scratch.
1

Install Taucharts

Install the package with your preferred package manager.
npm install taucharts
Taucharts bundles its D3 submodule dependencies, so you do not need to install D3 separately when using npm.
2

Import the CSS and JavaScript

Import the stylesheet and the library. The minified distribution bundles the core and all built-in plugins into a single file pair.
import Taucharts from 'taucharts';
import 'taucharts/dist/taucharts.min.css';
If you need only the core without plugins, import from dist/taucharts.js and load individual plugins from dist/plugins/ as needed. For example:
import tooltip from 'taucharts/dist/plugins/tooltip';
3

Define your data and chart config

Create a chart by passing a configuration object to new Taucharts.Chart(). The type field selects the chart type, and x, y, color, and size each accept a field name from your data array.
var chart = new Taucharts.Chart({
    type : 'scatterplot',
    x    : 'Cycle Time',
    y    : 'Bugs Count',
    color: 'Team',
    size : 'Story Points',
    data : [
        { 'Cycle Time': 12, 'Bugs Count': 4,  'Team': 'Alpha', 'Story Points': 8  },
        { 'Cycle Time': 20, 'Bugs Count': 9,  'Team': 'Beta',  'Story Points': 13 },
        { 'Cycle Time': 7,  'Bugs Count': 2,  'Team': 'Alpha', 'Story Points': 5  },
        { 'Cycle Time': 31, 'Bugs Count': 15, 'Team': 'Gamma', 'Story Points': 21 },
        { 'Cycle Time': 18, 'Bugs Count': 6,  'Team': 'Beta',  'Story Points': 8  }
    ]
});
Every string you pass to x, y, color, or size must match a key present in the data objects. Taucharts infers scale types automatically from the data values.
4

Render to the DOM

Call renderTo() with a CSS selector string or a DOM Element reference. Taucharts measures the container’s dimensions at render time, so give the element an explicit height before calling renderTo.
<div id="chart" style="width: 100%; height: 400px;"></div>

chart.renderTo('#chart');
You can also pass an explicit size as the second argument to override the container dimensions:
chart.renderTo('#chart', { width: 800, height: 400 });
5

Add plugins

Pass a plugins array to the chart config. Retrieve built-in plugins by name via Taucharts.api.plugins.get().
var chart = new Taucharts.Chart({
    type : 'scatterplot',
    x    : 'Cycle Time',
    y    : 'Bugs Count',
    color: 'Team',
    size : 'Story Points',
    data : [
        { 'Cycle Time': 12, 'Bugs Count': 4,  'Team': 'Alpha', 'Story Points': 8  },
        { 'Cycle Time': 20, 'Bugs Count': 9,  'Team': 'Beta',  'Story Points': 13 },
        { 'Cycle Time': 7,  'Bugs Count': 2,  'Team': 'Alpha', 'Story Points': 5  },
        { 'Cycle Time': 31, 'Bugs Count': 15, 'Team': 'Gamma', 'Story Points': 21 },
        { 'Cycle Time': 18, 'Bugs Count': 6,  'Team': 'Beta',  'Story Points': 8  }
    ],
    plugins: [
        Taucharts.api.plugins.get('legend')(),
        Taucharts.api.plugins.get('tooltip')()
    ]
});

chart.renderTo('#chart');
The legend plugin renders a color-keyed legend alongside the chart. The tooltip plugin shows a hover tooltip with field values for the focused data point. Both are included in taucharts.min.js.
Taucharts 2 is compatible with D3 v4 and D3 v5. If you are working with an older version of D3 (v3 or earlier), use taucharts@1 instead. The global object name also changed between major versions — v2 uses Taucharts (capital T), while v1 used tauCharts.

​
Next steps

Scatterplot reference

Full configuration options for scatterplot charts, including size scales, color brewer overrides, and axis guide settings.

Plugins overview

Browse all built-in plugins — tooltip, legend, trendline, export, crosshair, and more.

Build docs developers (and LLMs) love

Get started for freeTalk to us