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 tooltip plugin displays a popup with data values when the user hovers over a chart element. By default it shows all data fields associated with the hovered point. You can restrict it to a specific subset of fields, apply custom formatting functions, and control whether HTML in values is sanitized before display.

​
Usage

var chart = new Taucharts.Chart({
    type: 'scatterplot',
    x: 'date',
    y: 'revenue',
    color: 'region',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('tooltip')({
            fields: ['date', 'revenue', 'region'],
            escapeHtml: true,
            formatters: {
                date: {
                    label: 'Date',
                    format: function (value) {
                        return value.toLocaleDateString();
                    }
                },
                revenue: {
                    label: 'Revenue',
                    format: function (value) {
                        return '$' + value.toLocaleString();
                    }
                }
            }
        })
    ]
});

​
Settings

​
fields
string[]
An array of data field names to display in the tooltip. When omitted, all fields from the data source are shown. Specify this to limit the tooltip to relevant fields and control their display order.
​
escapeHtml
boolean
default:"true"
When true, HTML characters in field values are escaped before rendering. Disable this only when you intentionally want to render HTML in tooltip values and trust the data source.
Setting escapeHtml to false allows raw HTML from your data to be injected into the DOM. Only do this when the data is trusted and sanitized upstream.
​
formatters
object
A map of field names to formatter definitions. Each entry controls the label and formatted value shown in the tooltip row for that field.A formatter can be either:
  • A plain function (value) => string — used as the format function; the field name is used as the label.
  • An object { label: string, format: (value) => string } — provides both a custom label and a format function.

​
Formatter format

// Function shorthand — label comes from the field name
formatters: {
    revenue: function (value) {
        return '$' + value.toLocaleString();
    }
}

// Object with explicit label
formatters: {
    revenue: {
        label: 'Monthly Revenue',
        format: function (value) {
            return '$' + value.toLocaleString();
        }
    }
}

​
Examples

​
Minimal — show all fields

Taucharts.api.plugins.get('tooltip')()

​
Show specific fields with custom labels

Taucharts.api.plugins.get('tooltip')({
    fields: ['name', 'score', 'category'],
    formatters: {
        score: {
            label: 'Test score',
            format: function (v) { return v.toFixed(1) + '%'; }
        },
        category: {
            label: 'Group',
            format: function (v) { return v || 'Unknown'; }
        }
    }
})

​
Date and currency formatting

Taucharts.api.plugins.get('tooltip')({
    fields: ['date', 'amount', 'status'],
    formatters: {
        date: {
            label: 'Period',
            format: function (d) {
                return d instanceof Date
                    ? d.toLocaleDateString('en-US', { month: 'short', year: 'numeric' })
                    : String(d);
            }
        },
        amount: {
            label: 'Total',
            format: function (v) { return '$' + Number(v).toLocaleString(); }
        }
    }
})

​
Events

The tooltip plugin interacts with the chart through the built-in event emitter. It fires highlight events on chart units to synchronize hover state between the tooltip and the rendered marks. You can listen for chart events using chart.on('render', handler) after the chart is rendered.

Build docs developers (and LLMs) love

Get started for freeTalk to us