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 built around a data-first philosophy: you pass a plain array of objects and the library figures out what kind of data each field contains. For most charts this automatic detection works without any additional configuration, but you can override it explicitly when you need precise control over how a field is interpreted or displayed.

The data property

The data property accepts an array of plain JavaScript objects. Each object represents one data point, and its keys become the available fields for axes, colors, sizes, and labels.
const chart = new Taucharts.Chart({
  type: 'scatterplot',
  x: 'effort',
  y: 'progress',
  color: 'team',
  data: [
    { effort: 3, progress: 40, team: 'Alpha' },
    { effort: 5, progress: 72, team: 'Beta' },
    { effort: 8, progress: 91, team: 'Alpha' },
  ],
});
data
object[]
Array of plain objects. Each object is one data point. All keys in the objects become available as dimension names.

Mapping fields to visual channels

These properties on ChartSpec control which data fields are mapped to which visual channels.
x
string | string[]
Field name(s) for the horizontal axis. Pass an array of two strings to create a faceted (small multiples) layout on the x axis.
y
string | string[]
Field name(s) for the vertical axis. Pass an array of two strings to create a faceted layout on the y axis.
color
string
Field name whose distinct values map to different colors. The color scale is ordinal for category dimensions and continuous for measure dimensions.
size
string
Field name whose numeric values control the size of points or bubbles.
label
string
Field name whose values are rendered as text labels on chart elements.
split
string
Field name used to split a single line or area into separate series without mapping them to color.

Automatic dimension type detection

When dimensions is omitted, Taucharts inspects the first non-null value of each field across the entire dataset and assigns a type and scale automatically.
Value typeDetected dimension typeDefault scale
Date objectmeasuretime
Plain objectorderordinal
Finite numbermeasurelinear
Anything else (string, boolean, …)categoryordinal
If a field contains mixed types across rows, the field falls back to category / ordinal.

Explicit dimensions configuration

Override auto-detection for any field by providing a dimensions map in the chart spec.
const chart = new Taucharts.Chart({
  type: 'bar',
  x: 'priority',
  y: 'count',
  data: [...],
  dimensions: {
    priority: {
      type: 'order',
      scale: 'ordinal',
      order: ['Low', 'Medium', 'High', 'Critical'],
    },
    count: {
      type: 'measure',
      scale: 'linear',
    },
    created: {
      type: 'measure',
      scale: 'time',
    },
  },
});
dimensions
object
A map from field name to dimension descriptor. Only include fields you want to override.

Dimension types

TypeMeaningDefault scale
categoryDiscrete labels with no inherent order (team names, statuses, …).ordinal
measureContinuous or date/time values (counts, durations, timestamps).linear (numbers), time (dates)
orderDiscrete labels with a defined custom order (severity levels, sprint names).ordinal

Null value handling

By default Taucharts removes rows where a measure-type or period-scale field is null before rendering. This prevents null values from distorting continuous axes. The behavior is controlled by the excludeNull setting (default true).
const chart = new Taucharts.Chart({
  type: 'line',
  x: 'date',
  y: 'value',
  data: [...],
  settings: {
    excludeNull: false, // keep rows with null measure values
  },
});
Setting excludeNull: false applies globally. If you need selective null handling, pre-filter your data before passing it to the chart.

Updating data at runtime

Use the setData() method to replace the chart’s dataset without recreating the chart instance. This is useful for streaming updates or user-driven filtering.
// Initial render
const chart = new Taucharts.Chart({ type: 'line', x: 'date', y: 'value', data: initialData });
chart.renderTo('#chart');

// Push new data later
chart.setData(updatedData);
For large, frequently-updated datasets, pair setData() with settings.asyncRendering: true (the default) to avoid blocking the main thread during re-renders.

Build docs developers (and LLMs) love