Stepped Line with angular-chart.js


I am using angular-chart.js for generating some charts dynamically with data from my backend.

What I haven’t found documentation on and no one seems to have asked so far is how to create a graph with a stepped line like chart.js features it here.

I haven’t found information about if this is supported yet.

What I tried is the following:

<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">

And the JS:

    $ = {
        type: 'line',
        datasets: [{
            steppedLine: true,
            data: countdata,
            fill: false
    $scope.labels = countlabels;

This is not working, the graph doesn’t show up. If I only pass the countdata array then it works: $ = countdata;


This type of chart is well supported.

The reason it’s not working is because, you are configuring the chart in an inappropriate way. $ should be an array of dataset­(s), not an object, and that’s the reason it’s working when you set $ = countdata

To add additional properties for the dataset­(s), you need to set those inside $scope.datasetOverride like so …

$scope.datasetOverride = [{
   steppedLine: true,
   fill: false

Here is a working example on plunker

Answered By – ɢʀᴜɴᴛ

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published