Rickshaw is a JavaScript toolkit for creating interactive time series graphs.

Rickshaw on GitHub

Graphing Toolkit

Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo →

Built on d3.js

It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Customize all you like with techniques you already know.

Open Source

Rickshaw is free and open source, available under the MIT license. Developed at Shutterstock. We're Hiring!


Getting Started

Here's a minimal but complete working example. We start by pulling in dependencies. A few extensions require jQuery, but here all we need is d3 and the Rickshaw library itself. Instantiate a graph, and then render it. For more along this path, check out the tutorial and also see our examples listing.

Area Graphs

Stacked Area

standalone example

Multiple Area

standalone example

Lines

Multiple Line

standalone example

Bars

var graph = new Rickshaw.Graph({
	element: document.querySelector("#chart"),
	renderer: 'bar',
	series: [{
		data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, ...
		color: 'steelblue'
	}]
});
 
graph.render();

Stacked Bars

standalone example
var graph = new Rickshaw.Graph( {
	element: document.querySelector("#chart"),
	renderer: 'bar',
	series: [{
		data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, ...
		color: 'steelblue'
	}, {
		data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, ...
		color: 'lightblue'
	}]
});
 
graph.render();

Multiple Bars

standalone example
var graph = new Rickshaw.Graph( {
	element: document.querySelector("#chart"),
	renderer: 'bar',
	stack: false,
	series: [{
		data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, ...
		color: 'steelblue'
	}, {
		data: [ { x: 0, y: 20 }, { x: 1, y: 24 }, ...
		color: 'lightblue'
	}]
});
 
graph.render();

Scatterplot

Scatterplot

standalone example

Interactive Legend


Add a basic legend:
var legend = new Rickshaw.Graph.Legend({
    graph: graph,
    element: document.querySelector('#graph')
});
Add functionality to toggle series' visibility on and off:
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
    graph: graph,
    legend: legend
});
Highlight each series on hover within the legend:
var highlighter = new Rickshaw.Graph.Behavior.Series.Highlight({
    graph: graph,
    legend: legend
});
Add drag-and-drop functionality to re-order the stack (requires jQueryUI):
var order = new Rickshaw.Graph.Behavior.Series.Order({
    graph: graph,
    legend: legend
});

Interactive Hover Details


Show the series value and formatted date and time on hover:
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph
} );
Specify formatting callbacks to customize output:
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
    graph: graph,
    xFormatter: function(x) { return x + "seconds" },
    yFormatter: function(y) { return Math.floor(y) + " percent" }
} );
See the custom formatter and subclass examples for more.

Annotations


Add toggleable annotations:
var annotator = new Rickshaw.Graph.Annotate({
    graph: graph,
    element: document.getElementById('timeline')
});

annotator.add(timestamp, message);
annotator.update();

Range Slider


Add a range selector with a slider from jQuery UI:
var slider = new Rickshaw.Graph.RangeSlider({
    graph: graph,
    element: document.querySelector('#slider')
});

Graphs & Data via AJAX / JSONP


Instantiate a transport to fetch the data and draw a graph:
new Rickshaw.Graph.JSONP({
	element: document.querySelector('#chart'),
	dataURL: 'http://example.com/data'
});
Transform the data before sending in, and then add other elements once that's done:
new Rickshaw.Graph.JSONP({
	element: document.querySelector('#chart'),
	dataURL: 'http://example.com/data',
	onData: function(d) {
		d[0].data[0].y += 1;
		return d;
	},
	onComplete: function(transport) {
		var graph = transport.graph;
		var detail = new Rickshaw.Graph.HoverDetail({ graph: graph });
	}
});

Axes and Tick Marks


Add a basic x-axis with time values:
var xAxis = new Rickshaw.Graph.Axis.Time({
    graph: graph
});

xAxis.render();
Add a basic y-axis:
var yAxis = new Rickshaw.Graph.Axis.Y({
    graph: graph
});

yAxis.render();
Override time units on the x-axis:
var time = new Rickshaw.Fixtures.Time();
var seconds = time.unit('second');

var xAxis = new Rickshaw.Graph.Axis.Time({
    graph: graph,
    timeUnit: seconds
});

xAxis.render();
Format tick values on the y-axis:
var yAxis = new Rickshaw.Graph.Axis.Y({
    graph: graph,
    tickFormat: Rickshaw.Fixtures.Number.formatKMBT
});

yAxis.render();
For y-axes outside the graph, specify an axis container element and an orientation:
var yAxis = new Rickshaw.Graph.Axis.Y( {
    graph: graph,
    orientation: 'left',
    element: document.getElementById('y_axis'),
} );

yAxis.render();
For x-axes with numeric or other non-time values:
var xAxis = new Rickshaw.Graph.Axis.X( {
    graph: graph
} );

More Resources

Tutorial

Get a simple graph on the page, add real data from the U.S. Census, and break that data down to draw some conclusions

Examples

See working examples exercising extensions. Add legends, annotations, axes and labels, get data via AJAX, etc.