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 ships with a number of specialized plugins beyond the most commonly used ones. This page documents six of them: crosshair for cursor tracking, layers for multi-series Y-axis overlay, quick-filter and category-filter for interactive data filtering, bar-as-span for span-encoded bars, and box-whiskers for statistical distribution charts.
The crosshair plugin renders a horizontal and/or vertical line that follows the mouse cursor across the chart area, with optional labels that display the axis value at the cursor position.
var chart = new Taucharts.Chart({
    type: 'line',
    x: 'date',
    y: 'value',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('crosshair')({
            xAxis: true,
            yAxis: true
        })
    ]
});

​
Settings

​
xAxis
boolean
default:"true"
When true, draws a vertical crosshair line and a label on the X axis at the cursor’s X position.
​
yAxis
boolean
default:"true"
When true, draws a horizontal crosshair line and a label on the Y axis at the cursor’s Y position.
​
formatters
object
A map of field names to formatter functions or { label, format } objects. Used to format the values displayed in the crosshair axis labels.
formatters: {
    date: {
        label: 'Date',
        format: function (d) { return d.toLocaleDateString(); }
    },
    value: function (v) { return v.toFixed(2); }
}
​
labelBoxHPadding
number
Horizontal padding in pixels inside the crosshair axis label box.
​
labelBoxVPadding
number
Vertical padding in pixels inside the crosshair axis label box.
​
labelBoxCornerRadius
number
Corner radius in pixels for the crosshair label box rectangle.
​
axisHPadding
number
Horizontal offset in pixels between the axis edge and the crosshair label.
​
axisVPadding
number
Vertical offset in pixels between the axis edge and the crosshair label.

​
Example with formatters

Taucharts.api.plugins.get('crosshair')({
    xAxis: true,
    yAxis: true,
    formatters: {
        date: {
            label: 'Month',
            format: function (d) {
                return d instanceof Date
                    ? d.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
                    : String(d);
            }
        },
        revenue: {
            label: 'Revenue',
            format: function (v) { return '$' + Number(v).toLocaleString(); }
        }
    },
    labelBoxHPadding: 6,
    labelBoxVPadding: 4,
    labelBoxCornerRadius: 3
})
The layers plugin overlays multiple chart series on a single plot with independent Y axes. Each layer is a separate chart specification that shares the same X axis. This is useful for comparing measures with different scales, such as revenue (large numbers) and conversion rate (0–100%) on the same timeline.
var chart = new Taucharts.Chart({
    type: 'line',
    x: 'date',
    y: 'revenue',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('layers')({
            mode: 'dock',
            showPanel: true,
            layers: [
                {
                    type: 'line',
                    y: 'conversionRate',
                    guide: { scaleOrient: 'right' }
                }
            ]
        })
    ]
});

​
Settings

​
title
string
default:"'Layers'"
Title displayed in the layers control panel.
​
label
string
default:"'Layer Type'"
Label for the layer type selector shown in the control panel.
​
showPanel
boolean
default:"true"
When true, renders a control panel that lets users toggle layer visibility.
​
showLayers
boolean
default:"true"
When true, all layers are visible on initial render.
​
mode
'dock' | 'merge'
default:"'merge'"
Controls how the additional Y axes are positioned.
  • 'dock' — each layer’s Y axis is placed alongside the chart, creating multiple parallel axes.
  • 'merge' — layers share a single Y axis scale.
​
axisWidth
number
default:"45"
Width in pixels reserved for each additional Y axis in 'dock' mode.
​
layers
ChartSpec[]
An array of chart spec objects, one per additional layer. Each object follows the same structure as a top-level ChartSpec (with type, y, color, guide, etc.) but inherits the primary chart’s x axis and data.
​
brewer
object
A map of layer names to CSS color strings used to color each layer’s axis label and line.

​
Example with docked axes

Taucharts.api.plugins.get('layers')({
    mode: 'dock',
    axisWidth: 50,
    layers: [
        {
            type: 'line',
            y: 'sessions',
            guide: { scaleOrient: 'left' }
        },
        {
            type: 'bar',
            y: 'bounceRate',
            guide: { scaleOrient: 'right' }
        }
    ],
    brewer: {
        sessions: '#3498db',
        bounceRate: '#e74c3c'
    }
})
The quick-filter plugin adds a range brush control for each numeric (measure) dimension in the chart. Users drag the brush handles to filter the chart data to a subset of the numeric range without writing any code.
var chart = new Taucharts.Chart({
    type: 'scatterplot',
    x: 'age',
    y: 'income',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('quick-filter')({
            fields: ['age', 'income'],
            applyImmediately: true
        })
    ]
});

​
Settings

​
fields
string[]
An array of numeric field names to create brush filters for. When omitted, filters are created for all measure dimensions in the data source. Only fields with a measure dimension type are supported; ordinal or category fields are skipped with a log warning.
​
applyImmediately
boolean
default:"false"
When true, the chart is filtered as the user drags the brush handle (live update). When false, the filter is applied only when the user releases the brush.

​
Example — filter two fields with live update

Taucharts.api.plugins.get('quick-filter')({
    fields: ['price', 'quantity'],
    applyImmediately: true
})
The category-filter plugin adds a panel of checkbox toggles for categorical dimensions, letting users show or hide individual categories without modifying the data. It complements the legend plugin’s click-to-filter behavior with a dedicated filter UI.
var chart = new Taucharts.Chart({
    type: 'bar',
    x: 'quarter',
    y: 'revenue',
    color: 'region',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('category-filter')({
            fields: ['region', 'status']
        })
    ]
});

​
Settings

​
fields
string[]
An array of categorical field names to render filter checkboxes for. When omitted, the plugin uses all dimension fields that are not the color dimension (unless skipColorDim is false).
​
formatters
object
A map of field names to formatter functions or { label, format } objects. Used to format the displayed label for each category value in the filter panel.
​
skipColorDim
boolean
default:"true"
When true, the dimension mapped to the chart’s color scale is excluded from the filter panel to avoid duplicating the legend’s filtering capability. Set to false to include the color dimension in the panel.

​
Example with custom formatters

Taucharts.api.plugins.get('category-filter')({
    fields: ['priority', 'type'],
    formatters: {
        priority: {
            label: 'Priority',
            format: function (v) {
                return { 1: 'High', 2: 'Medium', 3: 'Low' }[v] || v;
            }
        }
    },
    skipColorDim: false
})
The bar-as-span plugin transforms a bar chart so that each bar spans between two data values instead of starting from zero. This is useful for Gantt-style charts, duration charts, and any visualization where bars represent ranges.
var chart = new Taucharts.Chart({
    type: 'horizontal-bar',
    x: 'startDate',
    y: 'task',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('bar-as-span')({
            x0: 'endDate'
        })
    ]
});

​
Settings

​
x0
string
The name of the data field that provides the start value for bars on the X axis. The bar will span from x0 to x. Use this for horizontal bars where each bar encodes a range on the X dimension.
​
y0
string
The name of the data field that provides the start value for bars on the Y axis. The bar will span from y0 to y. Use this for vertical bars where each bar encodes a range on the Y dimension.
​
collapse
boolean
default:"true"
When true, adjacent bars with the same category value are collapsed to remove gaps. Set to false to keep gaps between non-overlapping bars.

​
Example — Gantt chart

var tasks = [
    { task: 'Design',     start: new Date('2024-01-01'), end: new Date('2024-01-15') },
    { task: 'Development', start: new Date('2024-01-10'), end: new Date('2024-02-20') },
    { task: 'Testing',    start: new Date('2024-02-15'), end: new Date('2024-03-05') }
];

var chart = new Taucharts.Chart({
    type: 'horizontal-bar',
    x: 'end',
    y: 'task',
    data: tasks,
    plugins: [
        Taucharts.api.plugins.get('bar-as-span')({
            x0: 'start',
            collapse: false
        })
    ]
});
The box-whiskers plugin transforms a scatter plot into a box-and-whisker plot. It computes the median, Q1, Q3, minimum, and maximum for each category group and renders the standard box plot geometry. You can control how the underlying data points (scatter) are shown alongside the boxes.
var chart = new Taucharts.Chart({
    type: 'scatterplot',
    x: 'group',
    y: 'measurement',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('box-whiskers')({
            mode: 'show-scatter'
        })
    ]
});

​
Settings

​
mode
'show-scatter' | 'hide-scatter' | 'outliers-only'
default:"'show-scatter'"
Controls how the raw data points are rendered alongside the box plot.
  • 'show-scatter' — all individual data points are shown as a scatter layer beneath the boxes.
  • 'hide-scatter' — no individual data points are shown; only the box geometry is visible.
  • 'outliers-only' — only data points that fall outside the whiskers (outliers) are shown as individual points.

​
Examples

// Show only the box geometry
Taucharts.api.plugins.get('box-whiskers')({ mode: 'hide-scatter' })

// Show boxes with outlier points only
Taucharts.api.plugins.get('box-whiskers')({ mode: 'outliers-only' })

// Show boxes with all data points visible
Taucharts.api.plugins.get('box-whiskers')({ mode: 'show-scatter' })

Build docs developers (and LLMs) love

Get started for freeTalk to us