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

Solution 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.

Solution 2

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>

Solution 3

I don't think there is a need to include Chart.HorizontalBar.js now. This is how to get a simple horizontal bar chart in Angular using chart.js-

HTML-

<div>
    <canvas id="bar-chart-horizontal" width="800" height="450"></canvas>
</div>

JS controller-

var myChart = new Chart(document.getElementById("bar-chart-horizontal"), {
        type: 'horizontalBar',
        data: {
          labels: ["Africa", "Asia", "Europe", "Latin America", "North America"],
          datasets: [
            {
              label: "Population (millions)",
              backgroundColor: ["#ff0000", "#8e5ea2","#3cba9f","#454545","#c45850"],
              data: [2478,5267,734,784,433]
            }
          ]
        },
        options: {
          legend: { display: false },
          title: {
            display: true,
            text: 'Predicted world population (millions) in 2050'
          }
        }
    });

Comments

[Lexy Feito]

@user2402107 Hello can you tell me how did you get it working, i havent been able to. Thank you.

[grdaneault]

Here's the example on github: github.com/tomsouthall/Chart.HorizontalBar.js/blob/master/…

[user2402107]

exactly what grdneault said

[Anton]

above link not found

[degreesightdc]

Even using the example (and running the project locally) I couldn't get this to work. Sad day... am I missing something?

[degreesightdc]

Update: the source URL of chart.js needed to be changed and the syntax of how you create a chart needed to be changed. <script src="cdn.jsdelivr.net/npm/[email protected]"></script>