[Chartjs]-Angular-chart / line chart with multiple horizontal lines (margins)

by

3👍

✅

I finally got it resolved and hope this will help someone else who might have a similar task.

$scope.options is the place inside the angular controller where the margin lines’ properties will be received from the back end and assigned to $scope.options (you would replace the current hard coded label, value, and color for each horizontal line with the dynamic values). 

    $scope.options = {

        limitLines: [
            {
                label: 'Upper margin 1',
                value: 90,
                color: 'rgba(255, 0, 0, .9)'
            },
            {
                label: 'Upper margin 2',
                value: 75,
                color: 'rgba(255, 165, 0, .8)'
            },
            {
                label: 'Lower margin 1',
                value: -10,
                color: 'rgba(0, 165, 255, .8)'
            },
            {
                label: 'Lower margin 2',
                value: -25,
                color: 'rgba(0, 0, 255, .8)'
            }
        ]

}

Then the canvas tag in HTML will have the options added:

chart-options="options"

Finally, in the line chart extension code, in the draw function ‘lines’ will be bridged to ‘limitLines’ via options:

    draw: function () {
    Chart.types.Line.prototype.draw.apply(this, arguments);

    var lines = this.options.limitLines;

Leave a comment