Chartjs-Enable Stepped lines in Chart.Js

by

1👍

✅

In Chart.js 3.x, steppedLine property was changed to stepped.

Sample:

const data = {
    labels: ['Day 1', 'Day 2', 'Day 3', 'Day 4', 'Day 5', 'Day 6'],
    datasets: [
        {
            label: 'Dataset',
            data: Utils.numbers({count: 6, min: -100, max: 100}),
            borderColor: Utils.CHART_COLORS.red,
            fill: false,

            // Change the stepped mode to explore different stepped chart options
            // false: no stepping
            // true: stepped before interpolation
            // 'before': step before interpolation
            // 'after': step after interpolation
            // 'middle': step middle interpolation
            stepped: true
        }
    ]
};

1👍

Check out the examples of Chartjs on Github, multiple stepped line chart examples included – https://github.com/chartjs/Chart.js/blob/master/samples/charts/line/stepped.html

The example from there recreated on Codepen – https://codepen.io/Inlesco/pen/yXEvOz

The configs for steppedLine on each chart in the Codepen example are defined in small chunks such as:

{
    steppedLine: true,
    label: 'No Step Interpolation',
    color: window.chartColors.red
}

Leave a comment