How Can I Make A Stepline Or Stepped Chart In Chart.js Or D3?

I'm able to accomplish this in Google Spreadsheets, below is a screenshot: Here's the small dataset in CSV Buy PPU,Sell PPU,Net PPU 0.023,0.019,-0.000725 0.026,0.0165,-0.003725 0.

Solution 1:

Nobody seem to have answered this, but you can do that with chart.js by setting steppedLine: true in the dataset configuration.

varconfig= {
        type:'line',
        data: {
            datasets: [{
                label:"My dataset",
                data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()],
                steppedLine:true,
            }
   }

Solution 2:

@Baz's answer is perfect for D3 version 3, but for anyone struggling to find similar resources for version 4 (the API changed pretty dramatically)..

The process now is to use d3.curveStepAfter instead.

documentation

example

---

An alternative approach is using a line and manually setting the interpolator, eg, d3.line().curve(d3.curveStepAfter)

Solution 3:

You can use a d3.svg.line and set the line.interpolate to either step-before or step-after.

Here is the documentation:

https://github.com/mbostock/d3/wiki/SVG-Shapes#line_interpolate

Here is an example:

http://bl.ocks.org/mbostock/4342190