Let's create a stacked area chart to compare how effort change over date across teams.

new tauCharts.Chart({
    type: 'stacked-area',
    x: 'date',
    y: 'effort',
    color: 'team',
    data: [
        {team: 'Alpha', date: '2015-07-15', effort: 400},
        {team: 'Beta',  date: '2015-07-15', effort: 100},
        {team: 'Gamma', date: '2015-07-15', effort: 300},
        {team: 'Alpha', date: '2015-07-16', effort: 200},
        {team: 'Beta',  date: '2015-07-16', effort: 200},
        {team: 'Gamma', date: '2015-07-16', effort: 100},
        ...
    ]
}).renderTo('#target');

Example

guide.showAnchors

Defines when to show anchors:

  • hover (default) - anchor will appear when user points a cursor over it.
  • always - anchors will always be visible.
  • never - anchors will not be displayed.
new tauCharts.Chart({
  ...
  guide: {
    showAnchors: 'always'
  }
})

guide.interpolate

Areas can be represented with polygons, smooth curves or steps:

  • linear - default polyline.
  • smooth - smooth curve, suits for interpolating math data.
  • smooth-keep-extremum - curve which doesn't exceed point values, suites for business data.
  • step, step-before, step-after - connects points using steps.
new tauCharts.Chart({
  ...
  guide: {
    interpolate: 'smooth-keep-extremum'
  }
})

Example