I'm creating a bar graph that has two bars representing different weeks. Currently, it looks like this:

https://i.stack.imgur.com/6Avni.png

However, I want it to look like this:

https://i.stack.imgur.com/TAVqe.png

In order to achieve the desired result, I need to calculate the percentage difference between week 1 (top/green bar) and week 2 (bottom/orange bar), and display it at the end of the week 2 bars.

Currently, I am adding the values to the bars using the following code:

Chart.pluginService.register({
    afterDraw: function (chartInstance) {
        var ctx = chartInstance.chart.ctx;
        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(addCommas(dataset.data[i]), model.base + 20, model.y + 6);
            }
        });
    }
});

However, I don't know how to perform the calculation and append it to the end of the bars.

For the complete implementation of the chart, here is the rest of the jQuery code:

var ctxForecastChart = $("#forecastLineChart").get(0).getContext("2d");
var forecastChartData = {
    labels: [
        "Total Qty", "Total Sales"
    ],
    datasets: [
        {
            label: "9/18/2016",
            backgroundColor: "rgba(34,139,34,0.75)",
            hoverBackgroundColor: "rgba(34,139,34,1)",
            data: [100, 1000.00]
        },
        {
            label: "9/25/2016",
            backgroundColor: "rgba(255,153,51,0.75)",
            hoverBackgroundColor: "rgba(255,153,51,1)",
            data: [110, 1110.11]
        }
    ]
};

var optionsForecast = {
    tooltips: {
        enabled: true
    }
};

var forecastBarChart = new Chart(ctxForecastChart,
{
    type: 'horizontalBar',
    data: forecastChartData,
    options: optionsForecast
});

UPDATE

I have tried Tektiv's code and it seemed promising initially, but for some reason, it completely breaks my charts. When using my original code:

Chart.pluginService.register({
    afterDraw: function (chartInstance) {
        var ctx = chartInstance.chart.ctx;
        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(addCommas(dataset.data[i]), model.base + 20, model.y + 6);
            }
        });
    }
});

I see the following result:

https://i.stack.imgur.com/75dIB.png

But when I replace it with the new code provided:

Chart.pluginService.register({
    afterDraw: function (chartInstance) {
        var ctx = chartInstance.chart.ctx;
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);

        // `start` makes a better rendering IMO
        ctx.textAlign = 'start';
        ctx.textBaseline = 'bottom';
        ctx.fillStyle = '#666';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(dataset.data[i], model.base + 5, model.y + 6);

                if (i == 1) {
                    // Calculate percentage difference between week 1 and week 2

                    // If needed, access other dataset
                    var otherDataset = chartInstance.data.datasets[(dataset._meta[0].controller.index == 1) ? 0 : 1];

                    // Get the value to display - percentage difference
                    var value = Math.round((Math.abs(dataset.data[i] - otherDataset.data[i]) / dataset.data[i]) * 100);

                    // Display the calculated value at the end of the bar using the `x` property of the model
                    ctx.fillText(value + "%", model.x + 5, model.y + 6);
                }
            }
        });
    }
});

I see the following result:

https://i.stack.imgur.com/1w4Hs.png

I don't understand why this is happening as the new code seems fine to me.

UPDATE 2

The updated code is an improvement, but it still distorts the other charts:

https://i.stack.imgur.com/Zo5Tm.png

UPDATE 3

After further investigation, I realized that there is a conflict between multiple `onDraw()` events. There is another event handling the Price Compliance chart:

Chart.pluginService.register({
    afterDraw: function (chartInstance) {
        var ctx = chartInstance.chart.ctx;
        // render the value of the chart above the bar
        ctx.font = Chart.helpers.fontString(14, 'bold', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';

        chartInstance.data.datasets.forEach(function (dataset) {
            for (var i = 0; i < dataset.data.length; i++) {
                var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
                ctx.fillText(addCommas(dataset.data[i]), model.base + 20, model.y + 6);
                //ctx.fillText(dataset.data[i], model.base + 20, model.y + 6);
            }
        });
    }
});