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 guide property on a chart spec is the primary way to control the visual presentation of axes, colors, and chart elements without touching the underlying data. It maps directly to the ChartGuide interface and can be a single object for simple charts or an array of objects for faceted layouts.

​
Axis options

Both x and y accept the same set of sub-properties.
​
guide.x
object
Visual configuration for the horizontal axis.
​
guide.y
object
Visual configuration for the vertical axis. Accepts the same sub-properties as guide.x.

​
Example: axis labels and formatting

const chart = new Taucharts.Chart({
  type: 'line',
  x: 'date',
  y: 'revenue',
  data: [...],
  guide: {
    x: {
      label: { text: 'Month', padding: 35 },
      tickPeriod: 'month',
      tickFormat: 'month-short',
    },
    y: {
      label: 'Revenue (USD)',
      nice: true,
      tickFormat: (v) => '$' + v.toLocaleString(),
    },
  },
});

​
Padding

​
guide.padding
{ t: number; r: number; b: number; l: number }
Inner padding (in pixels) around the plot area within the chart frame. Properties map to top (t), right (r), bottom (b), and left (l).
guide: {
  padding: { t: 10, r: 20, b: 50, l: 60 },
}

​
Color brewer

​
guide.color.brewer
string[] | { [group: string]: string }
Custom color palette for the color channel. Provide an ordered array of CSS color strings to assign colors by index, or an object mapping each category value to a specific color.

​
Array brewer

Colors are assigned in order to each distinct value of the color field. 
guide: {
  color: {
    brewer: ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3'],
  },
}

​
Object brewer

Assigns a specific color to each named group, regardless of order. 
guide: {
  color: {
    brewer: {
      'In Progress': '#f0a500',
      'Done':        '#3cb371',
      'Blocked':     '#cc3300',
    },
  },
}

​
Anchors and hover behavior

​
guide.showAnchors
'always' | 'hover' | 'never'
default:"hover"
Controls when interactive anchor points (tooltips targets) are visible on line and area charts. 'always' shows all points permanently; 'hover' shows them only on mouse proximity; 'never' hides them entirely.

​
Line interpolation

​
guide.interpolate
'linear' | 'smooth' | 'smooth-keep-extremum' | 'step' | 'step-before' | 'step-after'
default:"linear"
The interpolation method used to draw lines and areas between data points.
ValueBehavior
linearStraight line segments between points
smoothCubic Bézier curve (may overshoot extremes)
smooth-keep-extremumSmooth curve that preserves local minima/maxima
stepHorizontal then vertical steps (midpoint transitions)
step-beforeVertical then horizontal steps
step-afterHorizontal then vertical steps (end of interval)
guide: {
  interpolate: 'smooth-keep-extremum',
}

​
Split series

​
guide.split
boolean
When true, renders each series in a separate panel stacked vertically. Useful for area charts where overlapping series would obscure each other.

​
Grid lines

​
guide.showGridLines
'x' | 'y' | 'xy'
Which grid lines to render inside the plot area. 'x' draws vertical lines, 'y' draws horizontal lines, and 'xy' draws both.
guide: {
  showGridLines: 'y', // horizontal grid lines only
}

​
Built-in tick format names

The following named formats can be passed to tickFormat without writing a custom function.
NameExample output
x-num-autoAuto-selects SI suffix (k, M, …) or scientific notation
percent42.5%
NameExample output
day15-Jan-2024
day-short15-Jan
week15-Jan-2024
week-short15-Jan
monthJanuary / January, 2024 (January shows year)
month-shortJan / Jan '24
month-yearJanuary, 2024
quarterQ1 2024
year2024
x-time-autoAuto-selects best date/time granularity
Each date format has a corresponding -utc variant (e.g. day-utc, month-utc) that uses UTC time instead of local time.

​
Facet guide configuration

When x or y contains an array of two field names, the chart renders as a faceted grid. Pass an array of ChartGuide objects to configure each facet level independently. 
const chart = new Taucharts.Chart({
  type: 'line',
  x: ['project', 'date'],
  y: 'effort',
  data: [...],
  guide: [
    // outer facet (project)
    {
      x: { label: 'Project' },
    },
    // inner chart
    {
      x: { label: 'Date', tickPeriod: 'month', tickFormat: 'month-short' },
      y: { label: 'Effort (hours)', nice: true },
      showGridLines: 'y',
    },
  ],
});
The array length must match the nesting depth of your facet. The last element in the array configures the innermost chart panel.

Build docs developers (and LLMs) love

Get started for freeTalk to us