ChartJS custom doughnut chart not showing in version 2.6.0

Question

I have a custom doughnut ChartJS (with rounded edges), but cannot find the right way to:

1. make it work under version 2.6.0 (it works just fine under ChartJS 2.0.2, but not under 2.6.0)

2. add a static red circle under the green with same radius, but with half the lineWidth (like an axis on which the green circle plots) - like this

Here is the Plunker

    Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
    Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
        draw: function (ease) {
            var ctx = this.chart.chart.ctx;

            var easingDecimal = ease || 1;
            Chart.helpers.each(this.getDataset().metaData, function (arc, index) {
                arc.transition(easingDecimal).draw();

                var vm = arc._view;
                var radius = (vm.outerRadius + vm.innerRadius) / 2;
                var thickness = (vm.outerRadius - vm.innerRadius) / 2;
                var angle = Math.PI - vm.endAngle - Math.PI / 2;

                ctx.save();
                ctx.fillStyle = vm.backgroundColor;
                ctx.translate(vm.x, vm.y);
                ctx.beginPath();
                ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
                ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            });
        },
    });

    var deliveredData = {
        labels: [
            "Value"
        ],
        datasets: [
            {
                data: [85, 15],
                backgroundColor: [
                    "#3ec556",
                    "rgba(0,0,0,0)"
                ],
                borderWidth: [
                    0, 0
                ]
            }]
    };

    var deliveredOpt = {
        cutoutPercentage: 88,
        animation: {
            animationRotate: true,
            duration: 3000
        },
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        }
    };

    var chart = new Chart($('#myChart'), {
        type: 'RoundedDoughnut',
        data: deliveredData,
        options: deliveredOpt
    });

Answer 1

For question #1 the issue is with the this.getDataset().metaData inside the draw function. It is returning undefined and so the function under Chart.helpers.each doesn't execute

Try this.getMeta().data instead.

EDIT: For question #2, you can refer to this other Stack Overflow question: Charts.js: thin donut chart background