JavaScript toolkit for creating interactive real-time graphs


NPM version Build Status Coverage Status


Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock

Table of Contents

Getting Started

Getting started with a simple graph is straightforward. Here's the gist:

var graph = new Rickshaw.Graph( {
  element: document.querySelector('#graph'),
  series: [
      color: 'steelblue',
      data: [ { x: 0, y: 23}, { x: 1, y: 15 }, { x: 2, y: 79 } ]
    }, {
      color: 'lightblue',
      data: [ { x: 0, y: 30}, { x: 1, y: 20 }, { x: 2, y: 64 } ]
} );


See the overview, tutorial, and examples for more.


In the browser, manually add rickshaw.min.js and rickshaw.min.css in the document head.

Alternatively, you can install Rickshaw using Bower or npm.

# With bower
bower install rickshaw
# With npm
npm install --save rickshaw


Rickshaw relies on the fantastic D3 visualization library to do lots of the heavy lifting for stacking and rendering to SVG.

Some extensions require jQuery and jQuery UI, but for drawing some basic graphs you'll be okay without.

Rickshaw uses jsdom to run unit tests in Node to be able to do SVG manipulation. As of the jsdom 7.0.0 release, jsdom requires Node.js 4 or newer jsdom changelog. If you want to run the tests on your machine, and you don't have access to a version of node >= 4.0, you can npm install [email protected] so that you can run the tests using the 3.x branch of jsdom.


A Rickshaw graph. Send an element reference, series data, and optionally other properties to the constructor before calling render() to point the graph. A listing of properties follows. Send these as arguments to the constructor, and optionally set them later on already-instantiated graphs with a call to configure()


A reference to an HTML element that should hold the graph.


Array of objects containing series data to plot. Each object should contain data at a minimum, a sorted array of objects each with x and y properties. Optionally send a name and color as well. Some renderers and extensions may also support additional keys.


A string containing the name of the renderer to be used. Options include area, stack, bar, line, and scatterplot. Defaults to line. Also see the multi meta renderer in order to support different renderers per series.


Width of the graph in pixels. Falls back to the width of the element, or defaults to 400 if the element has no width.


Height of the graph in pixels. Falls back to the height of the element, or defaults to 250 if the element has no height.


Lower value on the Y-axis, or auto for the lowest value in the series. Defaults to 0.


Highest value on the Y-axis. Defaults to the highest value in the series.


An object containing any of top, right, bottom, and left properties specifying a padding percentage around the extrema of the data in the graph. Defaults to 0.01 on top for 1% padding, and 0 on other sides. Padding on the bottom only applies when the yMin is either negative or auto.


Line smoothing / interpolation method (see D3 docs); notable options:

  • linear: straight lines between points
  • step-after: square steps from point to point
  • cardinal: smooth curves via cardinal splines (default)
  • basis: smooth curves via B-splines

Allows you to specify whether series should be stacked while in the context of stacking renderers (area, bar, etc). Defaults to stack: 'true'. To unstack, unstack: 'true'.


Once you have instantiated a graph, call methods below to get pixels on the screen, change configuration, and set callbacks.


Draw or redraw the graph.


Set properties on an instantiated graph. Specify any properties the constructor accepts, including width and height and renderer. Call render() to redraw the graph and reflect newly-configured properties.


Add a callback to run when the graph is rendered


Once you have a basic graph, extensions let you add functionality. See the overview and examples listing for more.

  • Rickshaw.Graph.Legend - add a basic legend

  • Rickshaw.Graph.HoverDetail - show details on hover

  • Rickshaw.Graph.JSONP - get data via a JSONP request

  • Rickshaw.Graph.Annotate - add x-axis annotations

  • Rickshaw.Graph.RangeSlider - dynamically zoom on the x-axis with a slider

  • Rickshaw.Graph.RangeSlider.Preview - pan and zoom via graphical preview of entire data set

  • Rickshaw.Graph.Axis.Time - add an x-axis and grid lines with time labels

  • Rickshaw.Graph.Axis.X - add an x-axis and grid lines with arbitrary labels

  • Rickshaw.Graph.Axis.Y - add a y-axis and grid lines

  • Rickshaw.Graph.Axis.Y.Scaled - add a y-axis with an alternate scale

  • Rickshaw.Graph.Behavior.Series.Highlight - highlight series on legend hover

  • Rickshaw.Graph.Behavior.Series.Order - reorder series in the stack with drag-and-drop

  • Rickshaw.Graph.Behavior.Series.Toggle - toggle series on and off through the legend


Rickshaw comes with a few color schemes. Instantiate a palette and specify a scheme name, and then call color() on the palette to get each next color.

var palette = new Rickshaw.Color.Palette( { scheme: 'spectrum2001' } );

palette.color() // => first color in the palette
palette.color() // => next color in the palette...

Optionally, to palette.color() can take a numeric argument to specify which color from the palette should be used (zero-indexed). This can be helpful when assigning a color to series of a plot with particular meaning:

var palette = new Rickshaw.Color.Palette( { scheme: 'colorwheel' } );

palette.color(0) // => first color in the palette - red in this example
palette.color(2) // => third color in the palette - light blue

Color Schemes

  • classic9
  • colorwheel
  • cool
  • munin
  • spectrum14
  • spectrum2000
  • spectrum2001


For graphs with more series than palettes have colors, specify an interpolatedStopCount to the palette constructor.

Rickshaw and Cross-Browser Support

This library works in modern browsers and Internet Explorer 9+.

Rickshaw relies on the HTMLElement#classList API, which isn't natively supported in Internet Explorer 9. Rickshaw adds support by including a shim which implements the classList API by extending the HTMLElement prototype. You can disable this behavior if you like, by setting RICKSHAW_NO_COMPAT to a true value before including the library.


If your project uses minification, you will need to give a hint to the minifier to leave variables named $super named $super. For example, with uglify on the command line:

$ uglify-js --reserved-names "$super" rickshaw.js > rickshaw.min.js

Or a sample configuration with grunt-contrib-uglify:

uglify: {
  options: {
    mangle: { except: ["$super"] }


For building, we use Node and npm. Running npm run build or make should get you going with any luck.

After doing a build you can run the tests with the command: npm test

For more availible options see the package.json scripts section.


Pull requests are always welcome! Please follow a few guidelines:

  • Please don't include updated versions of rickshaw.js and rickshaw.min.js. Just changes to the source files will suffice.
  • Add a unit test or two to cover the proposed changes
  • Do as the Romans do and stick with existing whitespace and formatting conventions (i.e., tabs instead of spaces, etc)
  • Consider adding a simple example under examples/ that demonstrates any new functionality

Please note that all interactions with Shutterstock follow the Contributor Covenant Code of Conduct.


This library was developed by David Chester, Douglas Hunter, and Silas Sewell at Shutterstock


Copyright (C) 2011-2020 by Shutterstock Images, LLC

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.


  • `object is not a function` error after uglify minification

    `object is not a function` error after uglify minification

    When minifying Rickshaw with uglify (via requirejs/r.js), I'm getting an "object is not a function" error somewhere from Rickshaw, while trying to render a bar graph. Here's a screenshot from Chrome's script panel, paused on uncaught exceptions:

    So the error is thrown in Rickshaw.Graph.Renderer.Bar.Rickshaw.Class.create.initialize, which is reasonable, as both arguments are objects, not functions. Though I have no idea why an object is passed where a function is expected. Maybe someone more familar with the code base can tell.

    Here's the code to render the graph in our application: Without minification that works fine.

    opened by jzaefferer 34
  • Range selection tool

    Range selection tool

    I made this range selection tool, the example is on rangeSelector.html It pretty much covers the mouse selection behavior and zooming yet it still could use some improvement.

    opened by atdnd 23
  • Feature/renderermulti


    I created this pull request which is enhancement of muddydixon's request. (He is my colleague)

    In this patch, you can use all type of renderers. And the order of renderers are defined by the inserted order into a series array.

    Please merge this!

    opened by Blufe 18
  • Show time graph in local time

    Show time graph in local time

    This PR is related to issue #140, Timezone is not adjustable for Time based axis.

    My goal is somewhat more narrow than the popular asks in issue #140. I only attempt to enable chart to use user-agent default time format.

    I forked a new file Fixtures.LocalTime.js based on the original Fixtures.Time.js.

    The only change to original code is in Axis.Time allowing timeFixtures to be specified.

    I updated extension.html examples to show usage.

    opened by thomasyip 16
  • Set custom Y-scale (unit and extremums) for each time serie

    Set custom Y-scale (unit and extremums) for each time serie


    I have two different time series (memory usage, and number of processes), that use different units and scales.

    is it possible with Rickshaw to have different scales/units, for each time serie ?

    I'm thinking about creating two superposed rickshaw renderer, but it is a bit heavy (and I would love to use the same hover tooltip to show values in both series). Or extending/hacking rickshaw code, but maybe there is a nicer solution?

    Thanks, Julian

    opened by jbilcke 16
  • Support for null values in line/area graphs

    Support for null values in line/area graphs

    Since rickshaw can't handle null values, I usually tend to fill it up with integer 0 values. But, this leads to bad results if there's a lot of data missing - a sawtooth pattern. I'd prefer to actually skip drawing of null values.

    Am i wrong here or missing something? I've followed some more leads in d3.js and found a ticket describing the same problem.

    A similiar discussion of this problem in d3.js:

    And a pull request from 6 months ago:

    It is possible to use this in rickshaw.js to achieve a similar result?

    Kind regards, -Frederik

    opened by fdietz 12
  • Added method to remove HoverDetail's mouse listeners.

    Added method to remove HoverDetail's mouse listeners.

    As discussed here there may be some times where it is explicitly required for the event handlers to be removed to avoid errors with them being triggered in an element that no longer exists.

    opened by andreftavares 11
  • Huge memory leaks in Rickshaw

    Huge memory leaks in Rickshaw


    We are developing a data analytics application with web visualization. We need to visualize many html charts in real time (e.g., several dashboard with 10-20 line charts having 300 points and updated 5 times per second).

    We found that our needs are more or less good served by d3 rickshaw library. Among many other javascript libraries, it seems having best (or nearly best) performance

    However, we also detected big memory leaks. Below are the details.

    Our code is here:

    rickshaw-master\examples\test_update.html - plotting generated data in real time. Sliding window is organized manually. Memory leak for currently used parameters is ~ 8 Mb/sec. rickshaw-master\examples\test_update_series.html - plotting generated data in real-time. Sliding window is organized via Rickshaw Series addon. Same memory leak.

    In test_update.html, charts are updated using following lines of code:

    function updateChart() {
    for(var g = 0; g < charts; g++){ yValues[g] += rnd(); data[g].shift(); data[g].push({x: xValue, y: yValues[g]}); } xValue += 1; graph.update(); // console.log(yValues) }
    setInterval(updateChart, interval);

    While debugging, we have revealed function render (Rickshaw.Graph.Renderer.js:75), where current svg:path (one for each chart) is deleted и and new path with new data is added. If comment that part of code, memory leaks disappear.

    In Crome webdevtools dump we found that there are a lot of remaining elements "SVGPathElement" (their amount increase linearly with time). Most part of them seems to be outside DOM (we tried to delete elements by remove() function, but it seems that still somewhere remain links to these elements. Besides of grow of SVGPathElement amount, we observed grow of amount of some arrays (with similar dimension as SVGPathElement ). This might lead to the conclusion, that somewhere links to the arrays with previous data are stored causing memory leaks.

    However, despite this considerations, we failed to locate exact reason of the memory leaks and find a solution to this problem.

    Best regards, Mikhail Kalinkin.

    opened by mkalinkin 9
  • Adding a scale option to series, adapting hover detail to be scale aware, and a scale-Y axis

    Adding a scale option to series, adapting hover detail to be scale aware, and a scale-Y axis

    This is useful for putting two different series of different magnitude normalized into the same graph and having multiple axis. See the scaled.html example.

    Rickshaw.Graph.Axis.Scaled inherits from Rickshaw.Graph.Axis.Y to enable code sharing.

    opened by diwu1989 8
  • Adding moving average

    Adding moving average

    Rickshaw.Graph.Smoother doesn't really do a window transform.

    I've added Rickshaw.Graph.MovingAverage to do moving average transform with example html.

    opened by diwu1989 8
  • How to Set Up Data Series

    How to Set Up Data Series

    Hi evryone I would like to use the graphic-interactive (that of example examples / extensions.html) and I wanted to enter custom values. How do I insert custom values​​?

    I tried to understand the Rickshaw.Fixtures.RandomData js files, which are created from the values ​​that you see in the example, but I could not understand how the values ​​are to tap.

    How do I represent dates on the x-axis? What kind of dates (SimpleDate, ...) should I use? How do I set the values ​​for the y-axis?

    If anyone can give me an example of the insertion of individual values ​​([x, y]) would understand perfectly. In practice I have to change this part:

    // set up our data series with 50 random data points

    var seriesData = [ [], [], [], [], [], [], [], [], [] ]; var random = new Rickshaw.Fixtures.RandomData(150);

    for (var i = 0; i < 150; i++) { random.addData(seriesData); } This can be some value :

    [0.12, '30/Aug/2012 11:27:05] [1.21, '30/Aug/2012 11:27:14'] [2.10, '30/Aug/2012 15:50:44'] [3.32, '30/Aug/2012 15:51:09']

    How i can put them in the chart?

    I'm supposed to take the values ​​from a db and represent them on a chart. I can take the values ​​but do not know how to pass to the function that draws the graph.

    Thanks in advance

    opened by homman 8
  • Spelling


    This PR corrects misspellings identified by the check-spelling action.

    The misspellings have been reported at

    The action reports that the changes in this PR would make it happy:

    Note: this PR does not include the action. If you're interested in running a spell check on every PR and push, that can be offered separately.

    opened by jsoref 0
  • Change Y-axis font size

    Change Y-axis font size

    How can I change the font size of the numbering along the Y axis? It's currently very small. I can change the size of the X axis with this:

    .rickshaw_graph .x_ticks_d3 text {
    	font-size: 30px;

    However, this technique doesn't work for the Y axis.

    opened by dplong 0
  • For same values  of y-axis graph line moves up and down

    For same values of y-axis graph line moves up and down

    One part of input data which i visualize is below "average_total_waste": "[0,0,0,0,0,0,0,0,0,0,0,0,0,41,41,41,41,132,132,132,132,331,331,331,331,469,469,469,469,572]",

    I use the code below to visualize it

            function generateTimeSeriesVisualization(jsonResults,visualzationArray,
                                                     chartID, x_axis_ID, y_axis_ID, legend_ID) {
                //results = dataset['results'];
                results = jsonResults;
                chartName = chartID;
                var palette = new Rickshaw.Color.Palette();
                var seriesData = [];
                for (var i in visualzationArray){
                        "color" : palette.color(),
                        "data" : convert_float_array_to_rickshaw_timeseries_format(results[visualzationArray[i]]),
                        "name" : visualzationArray[i]
                // instantiate our graph!
                var graph = new Rickshaw.Graph({
                    //element: document.getElementById("chart"),
                    element: document.getElementById(chartName),
                    width: 400,
                    height: 350,
                    renderer: 'line',
                    padding: {top: 0.02, left: 0.02, right: 0.02, bottom: 0.02},
                    min: 'auto',
                    series: seriesData
                var xaxis_formater = function (n) {
                    return Math.round(n);
                var hoverDetail = new Rickshaw.Graph.HoverDetail({
                    graph: graph,
                    xFormatter: xaxis_formater
                var legend = new Rickshaw.Graph.Legend({
                    graph: graph,
                    element: document.getElementById(legend_ID)
                var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
                    graph: graph,
                    legend: legend
                var x_ticks = new Rickshaw.Graph.Axis.X({
                    graph: graph,
                    orientation: 'bottom',
                    element: document.getElementById(x_axis_ID),
                    pixelsPerTick: 50,
                    tickFormat: xaxis_formater
                var y_ticks = new Rickshaw.Graph.Axis.Y({
                    graph: graph,
                    orientation: 'left',
                    tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
                    element: document.getElementById(y_axis_ID),
                    pixelsPerTick: 30
            function convert_float_array_to_rickshaw_timeseries_format(params) {
                var timeseries_array = [];
                for (i = 0; i < params.length; i++) {
                    var dict = {x: i, y: Math.round(params[i])};
                return timeseries_array

    The problem is y-axis value remains same for different values of x-axis. Now if the y-axis remains constant while x-axis moves forward, the line will dangle up and down This is shown in the sample picture also.

    github sample

    opened by isfando 0
  • Change label dynamically

    Change label dynamically

    I have a graph with 5 lines. The scale of each line is very different (and the scale varies for different users). Hence I want to allow the user to scale the data (using a slider). This part works perfectly, and I am able to update the values. However, now I want my label to be changed, so that it reflects the scale. For eg: if original label was "frequency", and it was scaled by 2, I want the label to be "frequency * 2". How can I do the same?

    opened by intelaravind 0
  • v1.7.0(Mar 30, 2020)

    • bug fix for Number.formatBase1024KMGTP
    • support color on Axis
    • support transform on Highlight
    • bug fix for usage without jQuery
    • add DragZoom
    • support 0 opacity
    Source code(tar.gz)
    Source code(zip)
  • v1.6.2(Aug 31, 2017)

  • v1.6.1(Jul 29, 2017)

    • andreftavares Added method to remove HoverDetail's mouse listeners.
    • GermanBluefox Remove error if no jQuery.
    • gaganawhad Add default value for renderer
    • michelle-stripe HoverDetail should default to being inactive.
    • stuartnelson3 Add Rickshaw.Graph.Dragzoom
    • mikeatlas use prepend/append files for UMD support
    • tamasgoga fixed stacked area chart hover detail bug in firefox
    • Mokeponi Fixes issue with negative values between 0 and -1
    • Bhashit Create a locally scoped copy of the loop-index var to prevent accessi…
    • cesine add Rickshaw.version
    Source code(tar.gz)
    Source code(zip)
  • v1.6.0(Jul 29, 2017)

  • v1.5.1(Dec 14, 2014)

  • v1.5.0(Jul 1, 2014)

    • Make lineplot play nicely with multi renderer
    • Better support for range sliders and resizing
    • Improve bar-width calculation for bar graphs
    • Provide better interface for toggling stacking in area graphs
    • Add UMD loader support
    • Bugfixes for handling empty series
    • jQuery conflict / compatibility fixes
    Source code(tar.gz)
    Source code(zip)
  • v1.4.6(Jul 1, 2014)

    • Add Rickshaw.Graph.RangeSlider.Preview, a graphical range slider
    • Fix assorted date rounding bug fixes
    • Support custom scales on x and y axes
    Source code(tar.gz)
    Source code(zip)
  • v1.4.5(Oct 23, 2013)

    • Improve placement of hovers so that they don't show outside the graph if possible
    • Refactor the legend so that it's easier to subclass
    • Add support for area graphs within the multi renderer
    • Fix for long-standing bug with the range slider and inconsistent series data
    Source code(tar.gz)
    Source code(zip)
  • v1.4.4(Oct 23, 2013)

    • Upgrade d3 dependency to version 3
    • Make range slider tollerate jQuery-wrapped element references
    • Support smaller time increments on x-axis
    • Add basic websockets support and example
    • Better handling for resizing graphs
    Source code(tar.gz)
    Source code(zip)
  • v1.4.3(Oct 23, 2013)

  • v1.4.2(Oct 23, 2013)

  • v1.4.1(Oct 23, 2013)

    • Support displaying local times on hovers and axes
    • Add lineplot renderer to render lines with circles on data points
    • Bug fixes: deselecting last series, scatterplot hovers, unstacked bars
    Source code(tar.gz)
    Source code(zip)
A web app that shows visualizations of the most used graphs algorithms such as BFS, DFS, Dijsktra, Minimum spanning tree, etc. It allows you to draw your own graph.

Graph Visualizer Draw your own graphs and visualize the most common graph algorithms This web application allows you to draw a graph from zero, with p

Gonzalo Pereira 31 Jul 29, 2022
An Attack Graphs Extension for

Attack Graphs Plugin for Installation and User Guide Please find the detailed documentation here. Technical Documentation Overview of the Plug

INCYDE GmbH 8 Nov 12, 2022
Easy-to-use js library for building graphs using svg.

LineChart Easy-to-use js library for building graphs using svg. Examples How to use Just add linechart.js from 'src' directory to your project. And ad

Korpusov Maxim 8 Nov 21, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Nov 17, 2022
A curated list of tools that can be used for creating interactive mathematical explorables.

A curated list of tools that can be used for creating interactive mathematical explorables.

Nikola Ubavić 74 Nov 14, 2022
A platform for creating interactive data visualizations

owid-grapher This is the project we use at Our World in Data to create embeddable visualizations like this one (click for interactive): ⚠️ This projec

Our World in Data 1.1k Nov 28, 2022
A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Epoch 5k Nov 17, 2022
A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

freeboard free·board (noun) *\ˈfrē-ˌbȯrd* the distance between the waterline and the main deck or weather deck of a ship or between the level of the w

freeboard 6.3k Nov 28, 2022
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Nov 25, 2022
A React toolkit for graph visualization based on G6

Graphin A React toolkit for graph analysis based on G6 English | 简体中文 ✨ Features ?? Good-looking elements, standardized style configuration Graphin st

AntV team 811 Nov 22, 2022
C7 is a canvas-based UI toolkit.

C7 C7 is a canvas-based UI toolkit. 中文版 Introduction C7 re-implements the key technology of modern front-end development based on HTML <canvas> (witho

null 39 Oct 22, 2021
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.

GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S

Northwoods Software Corporation 6.5k Nov 22, 2022
📊 Interactive JavaScript Charts built on SVG

A modern JavaScript charting library to build interactive charts and visualizations with simple API. Our Partner ApexCharts is now a partner of Fusion

ApexCharts 12k Nov 22, 2022
Beautiful and interactive javascript charts for Java-based web applications.

Wicked Charts Beautiful and interactive JavaScript charts for Java-based web applications. Check out the Changelog Check out the Feature Overview with

adesso SE 85 Aug 23, 2022
Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.

roughViz.js is a reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3v5, roughjs, and handy. Why? Use

Jared Wilber 6.4k Nov 17, 2022
Apache ECharts is a powerful, interactive charting and data visualization library for browser

Apache ECharts Apache ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly

The Apache Software Foundation 53.4k Nov 25, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.4k Nov 23, 2022
:dango: An interactive and responsive charting library

English | 简体中文 G2Plot A charting library based on the Grammar of Graphics. G2Plot is an interactive and responsive charting library. Based on the gram

AntV team 2.3k Nov 25, 2022