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

See guide reference for another sophisticated settings.



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:



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: [...]


See size encoding for a details.