node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »



Trendy graphs

Circle CI

Called on a selection of element, this component creates a sparkline for each member of the selection, based on data already bind to it.

The whole selection behaves like a group, which means the scales and the selection are coherent.


See this CodePen

See the Pen d3 sparklines by David Nowinsky (@davinov) on CodePen.


d3.js and lodash

<!-- Dependencies -->
<script src="lodash.js"></script>
<script src="d3.js"></script>


Import the library

<link href="dist/tc-sparklines.css" rel="stylesheet">
<script src="tc-sparklines.js"></script>

Generate your sparkline creator

var sparklines = d3.toucan.sparklines()

Apply it to some d3 selection that have it's data already bound




  • dateSelector
  • valueSelector
  • width
  • height
  • transitionDuration
  • unit
  • dateFormat: optional formatting of dates in tooltip
  • valueFormat: optional formatting of values in tooltip
  • forceLexicalOrder: optional, default true, set to false to force lexical reordering of ordinal dates
  • commonScatter: false by default, use the same scatter for all sparklines (y axis)
  • selectionTimeout: default 2000, time before tooltip disappears, 0 to disable
  • tooltipYOffset: default 0, offset of the tooltip ⚠️ The tooltip must be positioned in the <svg> element bounds

Get/set an option

Options are get/set in d3 style:

Get an option by passing no arguments

// Get the dateSelector value 
// -> 'date' 

Setting a value using the setter.

// Set the dateSelector value 

The setters returns the object so it's easy to chain options.

// Set the dateSelector value 

Bulk setting options on creation

Options can also be set once using an object.

var sparklines = d3.toucan.sparklines({
  height: 80,
  width: 250