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.

The settings property on a chart spec gives you fine-grained control over how Taucharts renders, animates, and lays out the chart. Every option has a sensible default sourced directly from Taucharts.api.globalSettings, so you only need to supply the properties you want to override. 
const chart = new Taucharts.Chart({
  type: 'line',
  x: 'date',
  y: 'value',
  data: [...],
  settings: {
    animationSpeed: 300,
    fitModel: 'fit-width',
    excludeNull: false,
  },
});

​
Animation

​
settings.animationSpeed
number
default:"750"
Duration of enter/update/exit animations in milliseconds. Set to 0 to disable animations entirely.

​
Rendering

​
settings.asyncRendering
boolean
default:"true"
When true, chart rendering is split into time-sliced chunks so the browser remains responsive during large renders. Disable for synchronous rendering in server-side or test environments.
​
settings.renderingTimeout
number
default:"10000"
Maximum time in milliseconds that async rendering is allowed to run before it is aborted. Only applies when asyncRendering is true.
​
settings.syncRenderingInterval
number
default:"50"
Time budget per rendering frame in milliseconds when asyncRendering is true. Lower values keep the UI more responsive at the cost of longer total render time.
​
settings.syncPointerEvents
boolean
default:"false"
Forces pointer event handlers (hover, click) to run synchronously. Useful when you need deterministic event timing in tests or automation.
​
settings.handleRenderingErrors
boolean
default:"false"
When true, rendering errors are caught and reported via the log function rather than throwing. Useful in production to prevent a single bad chart from breaking the page.

​
Logging

​
settings.log
function
Custom log handler called with (message: string, type: 'ERROR' | 'WARNING' | 'INFO' | 'LOG'). Defaults to the corresponding console method. Override to route chart diagnostics into your application’s logging pipeline.
settings: {
  log: (msg, type) => {
    if (type === 'ERROR') myErrorTracker.capture(msg);
  },
}

​
Data handling

​
settings.excludeNull
boolean
default:"true"
When true, rows where any measure-type or period-scale field is null are removed before rendering. Set to false to retain null rows (they will be treated as gaps on line charts).

​
Colors

​
settings.defaultColorBrewer
string[]
The default sequential color palette used for continuous (measure) color channels. Defaults to a 256-color viridis-inspired palette. Override with any array of CSS color strings.
​
settings.defaultClassBrewer
string[]
CSS class names assigned to discrete color categories. Defaults to ['color20-1', 'color20-2', …, 'color20-20']. Override when you want to control category colors entirely through CSS.

​
Facet labels

​
settings.facetLabelDelimiter
string
default:"' → '"
The string inserted between outer and inner facet label segments in the chart header. Defaults to a space, right arrow, space (" → ").

​
Size constraints

​
settings.minChartWidth
number
default:"300"
Minimum total chart width in pixels. The chart will not render narrower than this value.
​
settings.minChartHeight
number
default:"200"
Minimum total chart height in pixels.
​
settings.minFacetWidth
number
default:"150"
Minimum width in pixels for each facet panel in a faceted chart.
​
settings.minFacetHeight
number
default:"100"
Minimum height in pixels for each facet panel.

​
Axis tick label limits

​
settings.xAxisTickLabelLimit
number
default:"150"
Maximum width in pixels for a tick label on the x axis before it is truncated or wrapped.
​
settings.yAxisTickLabelLimit
number
default:"150"
Maximum width in pixels for a tick label on the y axis.

​
Fit model

The fitModel setting controls how the chart fills its container.
​
settings.fitModel
'none' | 'normal' | 'entire-view' | 'minimal' | 'fit-width' | 'fit-height'
default:"'normal'"
Layout strategy for sizing the chart within its container.
ValueBehavior
noneNo automatic sizing. The chart uses whatever space it is given.
normalThe chart fits within the container while preserving aspect ratio based on the specEngine breakpoints.
entire-viewThe chart expands to fill the entire container in both dimensions, potentially distorting the aspect ratio.
minimalThe chart shrinks to the minimum size needed to display all content.
fit-widthThe chart fills the container width; height is determined by content.
fit-heightThe chart fills the container height; width is determined by content.

​
Spec engine

​
settings.specEngine
Array<{ name: 'COMPACT' | 'AUTO'; width?: number; height?: number }>
Breakpoint rules that switch between spec engine modes based on chart dimensions. The first entry whose width and height bounds are not exceeded is used.The default configuration uses COMPACT mode for charts up to 600×400 px and AUTO for anything larger.
ModeBehavior
COMPACTReduces label density and axis decoration to fit smaller spaces
AUTOFull decoration with optimal tick and label density
settings: {
  specEngine: [
    { name: 'COMPACT', width: 400, height: 300 },
    { name: 'AUTO',    width: Infinity, height: Infinity },
  ],
}

​
Layout engine

​
settings.layoutEngine
'NONE' | 'EXTRACT'
default:"'EXTRACT'"
Controls how axis labels and ticks are extracted from the inner plot area. 'EXTRACT' moves axis decorations outside the plot bounds for a clean inner area. 'NONE' disables this extraction.

​
Aspect ratio

​
settings.autoRatio
boolean
default:"true"
When true, Taucharts automatically selects a height-to-width ratio that gives visually balanced tick density. Disable to take full manual control over chart dimensions.

​
Time zone

​
settings.utcTime
boolean
default:"false"
When true, all time scale operations—tick generation, period boundaries, and built-in date formatters—use UTC instead of the browser’s local time zone.

​
Default tick formats

​
settings.defaultFormats
{ [name: string]: string }
A map from dimension type token to default tick format name. The built-in defaults are:
defaultFormats: {
  'measure':      'x-num-auto',
  'measure:time': 'x-time-auto',
}
Override to apply a different format globally to all numeric or time axes without setting tickFormat on every guide.

​
Global settings

Apply settings to all charts on the page by mutating Taucharts.api.globalSettings. Any property set here becomes the new default for every chart created afterward. 
import Taucharts from 'taucharts';

// Apply once, before any charts are created
Object.assign(Taucharts.api.globalSettings, {
  animationSpeed: 300,
  utcTime: true,
  excludeNull: false,
  defaultFormats: {
    measure: 'x-num-auto',
    'measure:time': 'month-short',
  },
});
globalSettings is a shared mutable object. Changes affect all subsequently created charts in the same page, including charts created by third-party code. Prefer per-chart settings for anything that should not be universal.

Build docs developers (and LLMs) love

Get started for freeTalk to us