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

Under the hood angular-chart.js uses chart.js, which does not have native support for horizontal bar charts. That said, there is a horizontal bar chart plugin that can be added to support this type of chart: https://github.com/tomsouthall/Chart.HorizontalBar.js

I believe that to make this work, you will need to use the dynamic chart directive

<canvas id="base" class="chart-base" chart-type="type"
  chart-data="data" chart-labels="labels" chart-legend="true">
</canvas>

And then specify the type as HorizontalBar.