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.

Line charts connect individual data points with a continuous path, making it easy to follow how a value changes across an ordered dimension — typically time. When you supply a color field, Taucharts draws one line per unique value, allowing direct comparison of multiple series on the same axes. 
var chart = new Taucharts.Chart({
    type : 'line',
    x    : 'X Scale',
    y    : 'Y Scale',
    color: 'Team',
    size : 'Effort',
    label: 'Effort',
    data : [
        { Team: 'Alpha', Effort: 40, 'Y Scale': 23, 'X Scale': 72 },
        { Team: 'Alpha', Effort: 55, 'Y Scale': 31, 'X Scale': 85 },
        { Team: 'Beta',  Effort: 30, 'Y Scale': 18, 'X Scale': 60 },
        { Team: 'Beta',  Effort: 48, 'Y Scale': 27, 'X Scale': 78 }
    ]
});

chart.renderTo('#chart');

​
Configuration

​
type
string
required
Must be "line".
​
x
string
required
The data field mapped to the horizontal axis. For time series, use a date string or Date object field and set the dimension type to "measure" with scale "time".
​
y
string
required
The data field mapped to the vertical axis.
​
color
string
A data field used to split data into separate lines. Each unique value produces a distinctly colored series.
​
size
string
A data field used to vary the stroke width or point size along the line.
​
label
string
A data field whose value is rendered as a text label at each data point along the line.
​
data
object[]
required
Array of plain objects. Taucharts automatically sorts data by the dimension detected as the independent variable before drawing lines.
​
guide
object
Visual configuration object. The interpolate property controls the curve style used to connect points.
​
plugins
object[]
Array of plugin instances.

​
Interpolation options

Set guide.interpolate to control how Taucharts draws the curve between data points.
ValueDescription
"linear"Straight segments between each point (default).
"smooth"Cubic spline that passes through every point smoothly.
"smooth-keep-extremum"Smooth curve that preserves local minima and maxima.
"step"Horizontal segment followed by a vertical step at the midpoint.
"step-before"Vertical step first, then horizontal — value changes at the start of an interval.
"step-after"Horizontal first, then vertical — value changes at the end of an interval.
var chart = new Taucharts.Chart({
    type : 'line',
    x    : 'date',
    y    : 'revenue',
    color: 'region',
    guide: {
        interpolate: 'smooth'
    },
    data : [
        { date: '2024-01', revenue: 120, region: 'North' },
        { date: '2024-02', revenue: 145, region: 'North' },
        { date: '2024-03', revenue: 132, region: 'North' },
        { date: '2024-01', revenue:  80, region: 'South' },
        { date: '2024-02', revenue:  95, region: 'South' },
        { date: '2024-03', revenue: 110, region: 'South' }
    ],
    plugins: [
        Taucharts.api.plugins.get('legend')(),
        Taucharts.api.plugins.get('tooltip')()
    ]
});

chart.renderTo('#chart');
For stacked area charts — where series are layered on top of each other rather than overlaid — use type: "stacked-area". See the area chart reference for details.
Use "smooth-keep-extremum" when your data has meaningful peaks and valleys that should not be flattened by the curve fitting algorithm.

Build docs developers (and LLMs) love

Get started for freeTalk to us