How can I get my Chart.JS bar chart to stack two data values together on each bar, and print a calculated value on each bar?
<p>I'm creating a Chart.js bar chart like so:</p>

<p>HTML</p>

<pre><code>&lt;canvas id="priceComplianceBarChart" width="540" height="360"&gt;&lt;/canvas&gt;
</code></pre>

<p>JQUERY</p>

<pre><code>var barChartData = {
    labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
    datasets: [
        {
            fillColor: "rgba(220,220,220,0.5)",
            strokeColor: "rgba(220,220,220,0.8)",
            highlightFill: "rgba(220,220,220,0.75)",
            highlightStroke: "rgba(220,220,220,1)",
            data: [17724, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
        },
        {
            fillColor: "rgba(151,187,205,0.5)",
            strokeColor: "rgba(151,187,205,0.8)",
            highlightFill: "rgba(151,187,205,0.75)",
            highlightStroke: "rgba(151,187,205,1)",
            data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
        }
    ]
}

var ctxBarChart = document.getElementById("priceComplianceBarChart").getContext("2d");
var myBarChart = new Chart(ctxBarChart).Bar(barChartData);
</code></pre>

<p>That produces a chart that looks like this:</p>

<p><a href="https://i.stack.imgur.com/Yv5n5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Yv5n5.png" alt="enter image description here"></a></p>

<p>What I want instead, though, is the two side-by-side values to appear stacked onto the same bar, in different colors, and then a calculated value (% of the total which is represented by the predominant color) to be added as a label on each bar and appended to the legends, too (such as, "Bix Produce - 99.9%").</p>

<p>The appending of the val to the legend labels below the bars I can figure out myself, I'm sure, but how to stack the two values onto one bar, and how to add the label to the bars - I have no idea how to accomplish those objectives.</p>

<h2>UPDATE</h2>

<p>I'm trying Sergiu M's code, but must be doing something wrong, because my div in which the chart should appear is now completely blank. Here is my new code:</p>

<p>HTML</p>

<pre><code>&lt;div class="topright"&gt;
    &lt;h2 class="sectiontext"&gt;Price Compliance&lt;/h2&gt;
    &lt;div class="graph_container"&gt;
        &lt;canvas id="priceComplianceBarChart" width="400" height="400"&gt;&lt;/canvas&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.topright {
    margin-top: -4px;
    margin-right: 16px;
    margin-bottom: 16px;
    margin-left: -12px;
    padding: 16px;
    border: 1px solid black;
}

.sectiontext {
    font-size: 1.5em;
    font-weight: bold;
    font-family: Candara, Calibri, Cambria, serif;
    color: green;
    margin-top: -4px;
}
</code></pre>

<p>JQUERY</p>

<pre><code>var ctxBarChart = document.getElementById("priceComplianceBarChart").getContext("2d");
var priceBarChart = new Chart(ctxBarChart, {
    type: 'bar',
    data: {
        labels: ["Bix Produce", "Capitol City", "Charlies Portland", "Costa Fruit and Produce", "Get Fresh Sales", "Loffredo East", "Loffredo West", "Paragon", "Piazza Produce"],
        datasets: [{
            label: 'Some Values',
            backgroundColor: 'rgba(97, 188, 109, 0.2)',
            borderColor: 'rgba(97, 188, 109, .8)',
            data: [7000, 5565, 3806, 5925, 5721, 6635, 14080, 9027, 25553]
            //data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
        }, {
            label: 'Other Values',
            backgroundColor: 'rgba(236, 107, 86, 0.2)',
            borderColor: 'rgba(236, 107, 86, .8)',
            data: [17724, 2565, 1506, 3625, 3721, 4635, 7080, 4027, 12553]
            //data: [17, 1, 18, 14, 3, 1, 5, 10, 1]
        }]
    },
    options: {
        tooltips: {
            enabled: false
        },
        animation: {
            duration: 0,
            onComplete: function () {
                if (this.data.datasets.length === 2) {
                    // render the value of the chart above the bar
                    var ctx = this.chart.ctx;
                    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
                    ctx.fillStyle = this.chart.config.options.defaultFontColor;
                    ctx.textAlign = 'center';
                    ctx.textBaseline = 'bottom';
                    var firstDataSet = this.data.datasets[0];
                    var secondDataSet = this.data.datasets[1];
                    if (firstDataSet.length === secondDataSet.length) {
                        for (var i = 0; i &lt; firstDataSet.data.length; i++) {
                            var firstModel = firstDataSet._meta[Object.keys(firstDataSet._meta)[0]].data[i]._model;
                            var secondModel = secondDataSet._meta[Object.keys(secondDataSet._meta)[0]].data[i]._model;
                            var total = firstDataSet.data[i] + secondDataSet.data[i];
                            if (firstDataSet.data[i] &gt;= secondDataSet.data[i]) {
                                ctx.fillText((firstDataSet.data[i] * 100 / total).toFixed(2) + '%', firstModel.x, firstModel.y + 30);
                            } else {
                                ctx.fillText((secondDataSet.data[i] * 100 / total).toFixed(2) + '%', secondModel.x, secondModel.y + 30);
                            }
                        }
                    }
                }
            }
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                },
                stacked: true
            }],
            xAxes: [{
                stacked: true,
            }]
        }
    }
});
</code></pre>