What is Taucharts?

Taucharts is a javascript charting library. It is based on the awesome D3 framework and Grammar of Graphics concepts.

We built Taucharts around three rules:

1. Graphical design is imporant, so we design everything with passion.
2. Simple charts are easy to create, complex charts are not easy, but possible.
3. Flexibility is important. Its plugins framework should be powerful.

How do I create a simple line chart?

You have to include the d3.js and Taucharts libraries:

<script src="https://cdn.jsdelivr.net/npm/d3@4.13.0/build/d3.min.js" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.js" type="text/javascript"></script>

Also include the Taucharts CSS file:

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/taucharts@2/dist/taucharts.min.css">

Then prepare your data for use with the library. Taucharts accepts data as an array of similarly-typed objects (it looks like CSV):

var datasource = [{
  type:'us', count:20, date:'12-2013'
},{
  type:'us', count:10, date:'01-2014'
},{
  type:'bug', count:15, date:'02-2014'
},{
  type:'bug', count:23, date:'05-2014'
}];

The actual chart definition is pretty simple and speak for itself:

var chart = new Taucharts.Chart({
    data: datasource,
    type: 'line',
    x: 'date',
    y: 'count',
    color: 'type' // there will be two lines with different colors on the chart
});

Then, you can render the chart into some HTML element (container):

<div id='line'>

You can reference container using selector or pass a DOM element:

chart.renderTo('#line');
// or
chart.renderTo(document.getElementById('line'));

Example jsFiddle

Now, find 5 free minutes and check out our extended tutorial.