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.

Area charts fill the region beneath a line, making the magnitude of a value visually prominent. The stacked-area variant layers multiple series on top of each other so the vertical position of each band represents the cumulative total, not just the individual series value. Both types support the same guide.interpolate options as line charts. 
var chart = new Taucharts.Chart({
    type : 'stacked-area',
    x    : 'date',
    y    : 'effort',
    color: 'team',
    guide: {
        interpolate: 'smooth'
    },
    data : [
        { date: '2015-07-15', effort: 400, team: 'Alpha' },
        { date: '2015-07-15', effort: 200, team: 'Beta'  },
        { date: '2015-08-15', effort: 450, team: 'Alpha' },
        { date: '2015-08-15', effort: 310, team: 'Beta'  },
        { date: '2015-09-15', effort: 380, team: 'Alpha' },
        { date: '2015-09-15', effort: 270, team: 'Beta'  }
    ]
});

chart.renderTo('#chart');

​
area vs stacked-area

areastacked-area
Series renderingEach series drawn from the baseline independentlyEach series stacked on top of the previous one
Y-axis meaningIndividual series valueCumulative total
OverlapSeries can overlap, making lower series invisibleNo overlap — each band is fully visible
Use caseComparing independent trendsShowing part-to-whole composition over time

​
Configuration

​
type
string
required
"area" for independent series or "stacked-area" for cumulative stacking.
​
x
string
required
The data field mapped to the horizontal axis — typically a date or ordered category.
​
y
string
required
The data field mapped to the vertical axis — the value to fill beneath.
​
color
string
A data field that splits the data into separate area series. Each unique value produces a distinctly colored filled region.
​
guide
object
Visual configuration. The interpolate property controls the curve shape used for the area boundary.
​
data
object[]
required
Array of plain objects. Taucharts automatically sorts records by the independent dimension before rendering.
​
plugins
object[]
Array of plugin instances.

​
Interpolation options

Set guide.interpolate to control the curve drawn along the area boundary. The available values are the same as for line charts:
  • "linear" — straight segments (default)
  • "smooth" — cubic spline through each point
  • "smooth-keep-extremum" — smooth curve that preserves local peaks and valleys
  • "step" — stepped at the midpoint between points
  • "step-before" — vertical step first, then horizontal
  • "step-after" — horizontal first, then vertical step
var chart = new Taucharts.Chart({
    type : 'area',
    x    : 'month',
    y    : 'revenue',
    color: 'product',
    guide: {
        interpolate: 'smooth-keep-extremum'
    },
    data : [
        { month: '2024-01', revenue: 300, product: 'Widget A' },
        { month: '2024-02', revenue: 420, product: 'Widget A' },
        { month: '2024-03', revenue: 390, product: 'Widget A' },
        { month: '2024-01', revenue: 150, product: 'Widget B' },
        { month: '2024-02', revenue: 200, product: 'Widget B' },
        { month: '2024-03', revenue: 180, product: 'Widget B' }
    ],
    plugins: [
        Taucharts.api.plugins.get('legend')(),
        Taucharts.api.plugins.get('tooltip')()
    ]
});

chart.renderTo('#chart');
With stacked-area, y-axis values represent cumulative totals across all stacked series, not individual series values. Tooltip plugins will show the per-record value, not the stacked total.

Build docs developers (and LLMs) love

Get started for freeTalk to us