Let's create a simple line chart. For example, let's plot sin() and cos() functions on one chart.

Here is our datasource:

function data() {
    return (Array.from({length:100})
      .map(function (e,i) {return i;})
      .reduce(function (memo, x) {
          var i = x / 100;
          return memo.concat([
            {type: 'sin', i: i, val: Math.sin(i)},
            {type: 'cos', i: i, val: Math.cos(i)}
          ]);
      }, []));
}

Let's take red line shows sin() and green shows cos(). Colors brewer is defined in guide.color.brewer property.

new Taucharts.Chart({
    data: data(),
    type: 'line',
    x: 'i',
    y: 'val',
    color: 'type',
    guide: {
        color: {
          brewer: { sin: '#ff0000', cos: '#00ff00' }
        }
    }
}).renderTo('#target');

See guide reference for another sophisticated settings.

Example

split

By default data chunks for a line chart are split by color parameter. Taucharts gives the split parameter as an additional way to split data for lines. It is useful when you need to draw separate lines per property A and colorize them (optionally) by another property B.

Here is an example:

Example

size

Taucharts allows to build lines of variable width.

Minard's "Figurative map of the successive losses of men in the French army during the Russian campaign, 1812-1813" is now one of the most famous statistical graphics, thanks to Tufte. Example below demonstrates how to build it using Taucharts:

new Taucharts.Chart({
  type: 'line',
  x: 'longitude',
  y: 'latitude',
  text: 'place',
  size: 'survivors', // we use "size" to encode amount of survivors by line width
  split: 'group',
  color: 'direction',
  data: [...]
})

Example

See size encoding for a details.

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'
  }
})

Example

guide.interpolate

Line points can be connected using straight polyline or a smooth line:

• 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