Horizontal Bar-Chart in angular-chart.js

Question

I have successfully created a bar chart in angular-chart.js but now I want to change it into a horizontal bar chart. Also, I would like the fields to be placed inside of the horizontal bar itself:

code

 angular.module("app", ["chart.js"])
    .controller("LineCtrl", function ($scope) {

    var x =
    {
        "labels": [
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday",
            "Sunday"
        ],
        "data": [
            99,
            59,
            80,
            81,
            56,
            55,
            40
        ],
        "type": "line",
        "series": "eventTypePerDay"
    }

    console.log(x.series);
    //ses all of the variables to build the chart
    $scope.labels = x.labels;
    $scope.colours = ['#71d078'];
    $scope.type = x.type;
    $scope.data = [x.data];
    $scope.series = [x.series];


});

example of what I want

Answer 1

for those wondering here later; there are new versions of chart.js and angular-chart.js available. Chart.js 2.1 and later support horizontal charts, angular-chart.js has a new branch to work with the latest chart.js version see the github repo here.

Using this version does not require the above mentioned HorizontalBar plugin by Tom Southall.

Use the samples available at the above angular-chart.js site, and make sure to set the value of the class attribute to "chart-horizontalBar".

<canvas id="HorizontalBar" class="chart chart-horizontalBar" chart-data="data" chart-labels="labels" chart-series="series"></canvas>