How is it possible to create a stacked bar / horizontal chart with Chart.JS?

Question

I can create a "traditional" bar chart using Chart.JS, and even a stacked bar chart that looks like this:

But I need to create one that sports horizontal, rather than vertical, bars and which displays percentages along the bottom, a la this example shown below created using xlsxwriter:

How can Chart.JS be manipulated to perform wizardry of this order?

UPDATE

I marked the answer as correct, because it obviously works, based on the jsfiddle. But I have not been able to get the data to stack. This is what I see:

Here is my code:

var ctxBarChart = $("#priceComplianceBarChart").get(0).getContext("2d");
var barChartData = {
    labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
    datasets: [
        {
            label: "Price Compliant",
            backgroundColor: "rgba(34,139,34,0.5)",
            hoverBackgroundColor: "rgba(34,139,34,1)",
            data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
        },
        {
            label: "Non-Compliant",
            backgroundColor: "rgba(255, 0, 0, 0.5)",
            hoverBackgroundColor: "rgba(255, 0, 0, 1)",
            data: [170, 10, 180, 140, 30, 10, 50, 100, 10]
        }
    ]
}

var optionsBar = {
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
};

var priceBarChart = new Chart(ctxBarChart, {
    type: 'horizontalBar',
    data: barChartData,
    options: optionsBar
});

What am I doing wrong?

Note: I also tried this:

var optionsBar = {
    stacked: true
};

...and this (wearing a belt and suspenders):

var optionsBar = {
    stacked: true,
    options: {
        scales: {
            xAxes: [{
                stacked: true
            }],
            yAxes: [{
                stacked: true
            }]
        }
    }
};

UPDATE 3

This works (I had to peel one of the options levels off):

var optionsBar = {
    scales: {
        xAxes: [{
            stacked: true
        }],
        yAxes: [{
            stacked: true
        }]
    }
};

Already did it - I always vote up on every answer, unless they are impertinent. I will bountify this ASAP, too - takes 2 days, and then another day to make the award. — B. Clay Shannon-B. Crow Raven, Sep 20 '16 at 17:39
Unfortunately this is unbountifiable, apparently because it has been marked as a dupe; sorry if you feel duped. — B. Clay Shannon-B. Crow Raven, Sep 29 '16 at 14:52
It's ok :) you are welcome to bounty some of my other answers if you like (or vote 1 or 2 if you find something useful). — Dekel, Sep 29 '16 at 14:56

Dekel · Accepted Answer · 2016-09-20T17:37:24.950

If you want to create a horizontal bar instead of a regular char you can use type: 'horizontalBar'.
To create the chart as "stacked bar" you need to set

xAxes: [{
    stacked: true
}],
yAxes: [{
    stacked: true
}]

You can use this code:

var config = {
  type: 'horizontalBar',
  data: {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [{
      label: "Dataset 1",
      backgroundColor: "rgba(154,178,96,0.5)",
      hoverBackgroundColor: "rgba(154,178,96,1)",
      data: [10, 15, 5, 81, 55],
    }, {
      label: "Dataset 2",
      backgroundColor: "rgba(197,213,167,0.5)",
      hoverBackgroundColor: "rgba(197,213,167,1)",
      data: [90, 85, 95, 19, 45]
    }]
  },
  options: {
    scales: {
      xAxes: [{
        stacked: true
      }],
      yAxes: [{
        stacked: true
      }]
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx, config);

Here is a working example:
https://jsfiddle.net/0xLxum4s/

(For some reason it didn't work in so snippet so I used jsfiddle).

How is it possible to create a stacked bar / horizontal chart with Chart.JS?

UPDATE

UPDATE 3

1 Answers1