Stepped Line with angular-chart.js

Issue

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">
</canvas>

And the JS:

    $scope.data = {
        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: $scope.data = countdata;

Solution

This type of chart is well supported.

The reason it’s not working is because, you are configuring the chart in an inappropriate way. $scope.data should be an array of dataset­(s), not an object, and that’s the reason it’s working when you set $scope.data = 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