[Solved]-How can I make a stepline or stepped chart in chart.js or D3?-Chart.js

Chartjs provides the stepped line chart with the stepped property for various charts. For example, in the HTML document, add the canvas and with the id:

[html]

<canvas id="myChart" width="400" height="400"></canvas>
<script src="index.js"></script>

[index.js]

const ctx = document.getElementById('myChart').getContext('2d');

const data = {
    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
    datasets: [{
        label: '# of Votes',
        data: [5, 4, 3, 6, 2, 3],
        borderColor: '#FF0000',
        borderWidth: 2,
        stepped: 'after',
    }]
}

const myChart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

The stepped could be any of false, true, before, after, middle. Please see the docs for more information.

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

@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)

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

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