Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including stepify-plotly with all npm packages installed. Try it out:

var stepifyPlotly = require("stepify-plotly")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

stepify-plotly v1.0.6

transform line chart into step chart if .steps is truthy, otherwise passthru


Build Status

As of July 2016 this is useful to convert line charts into step charts in Plotly[tm].


You have this data:

x = [1,2,3,4,5];
y = [2,4,6,8,10];

but you want a stairstep plot:

 |          ___
 |          |
 |      ____|
 |      |    
 |   ___|
 |   |

not the straight line that Plotly.newPlot('outdiv',{x:x, y:y, mode:'line', type:'scatter'},{}) produces

##Staircase Plot Solution

Alters the x and y data to produce a staircase effect. It makes a copy first with Array.slice() so as not to pollute the original array.

var stepify = require('stepify-plotly');
var trace = {x:x, y:y, mode:'lines', type:'scatter', steps:1};  // stepify looks for steps:1, alters the data, deletes steps:1
Plotly.newPlot('outdiv', stepify(trace), {});

##Safe for regular line plots too

If trace.step is falsy, it is deleted and the plot data is unaltered. If trace.step is absent, trace is passed unaltered.


Copyright 2016 Paul Brewer, Economic and Financial Technology Consulting LLC


The MIT License


  • Plotly[tm] is a trademark of Plotly, Inc.

  • stepify-plotly is not an official product of Plotly, Inc., but our 3rd party open source contribution.

  • stepify-plotly is not part of a similarly named npm project called stepify, whatever that may be.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free