user2402107 user2402107 - 5 months ago 355
Javascript Question

Horizontal Bar-Chart in angular-chart.js

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

enter image description here

Answer

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.