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 annotations plugin draws visual markers on top of (or behind) a chart to call out important values. You can annotate a single threshold value with a line, mark a range with a shaded area, or draw a line between arbitrary data points. Each annotation accepts a color, an optional label, and a position setting that controls whether it appears in front of or behind the chart elements.

​
Usage

var chart = new Taucharts.Chart({
    type: 'line',
    x: 'date',
    y: 'revenue',
    data: dataset,
    plugins: [
        Taucharts.api.plugins.get('annotations')({
            items: [
                {
                    dim: 'revenue',
                    val: 50000,
                    text: 'Target',
                    color: '#e84040',
                    position: 'front'
                }
            ]
        })
    ]
});

​
Settings

​
items
object[]
required
An array of annotation descriptors. Each object in the array defines one annotation. See the annotation item fields below.
​
formatters
object
A map of dimension names to formatter functions or { label, format } objects. When a label template uses {{value}}, the formatter for that dimension is applied to produce the displayed string.

​
Annotation item fields

​
dim
string | [string, string]
required
The data field (or pair of fields) that the annotation targets.
  • A single string: targets one axis dimension, producing a vertical or horizontal line or area.
  • A two-element array [xField, yField]: targets both axes, producing a diagonal line between points.
​
val
any | [any, any] | [any, any][]
required
The value or values to annotate.
  • A single value: draws a line at that position on the axis.
  • A two-element array [start, end]: draws a shaded area between those values (when dim is a string).
  • An array of [x, y] pairs: draws a line through those coordinate points (when dim is a two-element array).
​
text
string
A label displayed on the annotation. You can embed {{value}} to interpolate the annotated value using the dimension’s formatter.When the annotation spans a range, text labels the start point. To label both endpoints independently, pass an object:
text: { start: 'From {{value}}', end: 'To {{value}}' }
​
color
string
default:"#BD10E0"
CSS color string for the annotation line, area, or label. Accepts hex codes, named colors, and any value accepted by the browser’s color parser.
​
position
'front' | 'back'
default:"'back'"
Controls the Z-order of the annotation relative to the chart’s data elements. Use 'front' to draw the annotation on top of bars and lines, or 'back' (default) to draw it behind them.

​
Examples

​
Single threshold line

Taucharts.api.plugins.get('annotations')({
    items: [
        {
            dim: 'score',
            val: 70,
            text: 'Pass threshold',
            color: '#27ae60',
            position: 'back'
        }
    ]
})

​
Shaded range

Taucharts.api.plugins.get('annotations')({
    items: [
        {
            dim: 'temperature',
            val: [18, 24],
            text: { start: 'Comfort zone start', end: 'Comfort zone end' },
            color: 'rgba(52, 152, 219, 0.3)',
            position: 'back'
        }
    ]
})

​
Diagonal line between two data points

Taucharts.api.plugins.get('annotations')({
    items: [
        {
            dim: ['date', 'revenue'],
            val: [
                [new Date('2024-01-01'), 10000],
                [new Date('2024-12-31'), 80000],
            ],
            text: 'Growth trend',
            color: '#e67e22'
        }
    ]
})

​
Multiple annotations with formatters

Taucharts.api.plugins.get('annotations')({
    items: [
        { dim: 'revenue', val: 0,     text: 'Break-even',  color: '#c0392b' },
        { dim: 'revenue', val: 50000, text: 'Q1 Target',   color: '#2980b9' },
        { dim: 'revenue', val: 100000, text: 'Annual Goal', color: '#27ae60' }
    ],
    formatters: {
        revenue: {
            label: 'Revenue',
            format: function (v) { return '$' + v.toLocaleString(); }
        }
    }
})

Build docs developers (and LLMs) love

Get started for freeTalk to us