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 distributed as an npm package and a CDN bundle. You can install it into a Node.js module build, load it directly in a browser from a CDN, or pull it in via Bower for legacy front-end workflows. This page covers all three methods along with TypeScript setup and D3 compatibility requirements.

​
Package managers

npm install taucharts
The package entry point is dist/taucharts.js as declared in package.json. The minified production build — including all bundled plugins — is at dist/taucharts.min.js and dist/taucharts.min.css.

​
CDN

Load Taucharts directly in a browser without a build step. Include D3 first, then Taucharts, and link the stylesheet in <head>. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My Taucharts app</title>
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css" />
</head>
<body>
  <div id="chart" style="width: 100%; height: 400px;"></div>

  <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>

  <script>
    var chart = new Taucharts.Chart({
        type : 'scatterplot',
        x    : 'effort',
        y    : 'bugs',
        color: 'team',
        data : [
            { effort: 12, bugs: 4, team: 'Alpha' },
            { effort: 20, bugs: 9, team: 'Beta'  },
            { effort: 7,  bugs: 2, team: 'Alpha' }
        ],
        plugins: [
            Taucharts.api.plugins.get('legend')(),
            Taucharts.api.plugins.get('tooltip')()
        ]
    });
    chart.renderTo('#chart');
  </script>
</body>
</html>
Pin to a specific version in production by replacing taucharts@2 with a full version number such as taucharts@2.8.0 to avoid unintended updates.

​
Module and ES import

When bundling with webpack, Rollup, or a similar tool, import the default export and the stylesheet:
import Taucharts from 'taucharts';
import 'taucharts/dist/taucharts.min.css';

var chart = new Taucharts.Chart({ /* config */ });
chart.renderTo('#chart');
You can also use named exports for Chart, Plot, api, and version directly:
import { Chart, api } from 'taucharts';
import 'taucharts/dist/taucharts.min.css';

var chart = new Chart({
    type   : 'scatterplot',
    x      : 'effort',
    y      : 'bugs',
    color  : 'team',
    data   : [{ effort: 12, bugs: 4, team: 'Alpha' }],
    plugins: [api.plugins.get('tooltip')()]
});
chart.renderTo('#chart');
To load only a specific plugin without the full bundle, import it from its own path:
import tooltip from 'taucharts/dist/plugins/tooltip';

​
TypeScript setup

Taucharts ships type declarations at types/index.d.ts, referenced via the types field in package.json. No additional @types package is needed. 
import { Chart, api } from 'taucharts';
import type { ChartSpec, PluginObject } from 'taucharts';

const spec: ChartSpec = {
    type   : 'scatterplot',
    x      : 'effort',
    y      : 'bugs',
    color  : 'team',
    data   : [{ effort: 12, bugs: 4, team: 'Alpha' }],
    plugins: [
        api.plugins.get('legend')() as PluginObject,
        api.plugins.get('tooltip')() as PluginObject
    ]
};

const chart = new Chart(spec);
chart.renderTo('#chart');
The key types exported from types/index.d.ts are:
TypeDescription
ChartSpecThe full chart configuration object passed to new Chart()
ChartGuideAxis and visual guide settings (x, y, padding, interpolate, etc.)
ChartSettingsGlobal rendering and layout settings
PluginObjectPlugin interface with optional init, destroy, and onRender hooks
PlotBase class with renderTo(), refresh(), resize(), updateConfig(), getSVG()
ChartExtends Plot; the primary class for creating charts

​
D3 version compatibility

Taucharts 2 (the current major version, taucharts@2) is compatible with D3 v4 and D3 v5. Use taucharts@1 if your project depends on D3 v3 or earlier.
When installing via npm, Taucharts declares individual D3 submodule dependencies (such as d3-selection, d3-scale, d3-shape) at version ranges compatible with D3 v4/v5. You do not need to install a top-level d3 package alongside Taucharts. When loading from a CDN, supply a D3 v4 or v5 bundle before the Taucharts script, as shown in the CDN section above.

Build docs developers (and LLMs) love

Get started for freeTalk to us