Chart.js Nested Pie Charts / different label options?

Question

Everything is perfect except that I can't get the percentage off the outer layer and have it display the labels. I need the outer chart to look like a clock face... Any ideas?

Thanks in advance

Apparently I need more text to post a question? Not sure what other details I can add, I tried multiple things nothing worked, so I am asking here.

  
var outer_labels = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
var inner_labels = ['On', 'Off'];
var new_labels = ['D Hours', 'P Hours', 'R Hours', 'L Hours', 'C Hours', 'N Hours', 'M Hours'];

var config = {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10, 10],
            backgroundColor: ['rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)', 'rgb(240, 240, 240)'],
            label: outer_labels,
            labels: outer_labels
        },
        {
            //data: [30, 70],
            data: [ , ],
            backgroundColor: ['rgb(247, 70, 74)', 'rgb(0, 0, 0)'],
            label: 'Inner Dataset',
            labels: inner_labels
        },
        {
            //data: [10,10,10,10,10,101,01],
            data: [ , , , , , , , ],
            //backgroundColor: ['rgb(247, 70, 74)', 'rgb(70, 191, 189)', 'rgb(253, 180, 91)'],
            backgroundColor: ['rgba(76, 120, 168, 1)', 'rgba(245, 133, 24, 1)', 'rgba(228, 87, 86, 0.5)', 'rgba(114,  183, 178, 1)', 'rgba(255, 217, 102, 1)', 'rgba(75, 0, 130, 1)', 'rgba(238, 130, 238, 1)', 'rgba(128, 128, 128, 0.1)'],
            label: 'new Dataset',
            labels: new_labels
        }],
        labels: outer_labels.concat(inner_labels)
    },
    options: {
        // rotation: -0.8 * Math.PI,
        legend: {
            position: 'left',
            labels: {
                generateLabels: () = >{
                    let labels = [];
                    // Iterate through datasets starting from index 1 instead of 0
                    config.data.datasets.slice(1).forEach((ds, iDs) = >labels = labels.concat(ds.labels.map((l, iLabel) = >({
                        datasetIndex: iDs + 1,
                        labelIndex: iLabel,
                        text: l,
                        fillStyle: ds.backgroundColor[iLabel],
                        hidden: chart ? chart.getDatasetMeta(iDs + 1).data[iLabel].hidden: false,
                        strokeStyle: '#fff'
                    }))));
                    return labels;
                }
            },
            onClick: (event, legendItem) = >{
                let metaData = chart.getDatasetMeta(legendItem.datasetIndex).data;
                metaData[legendItem.labelIndex].hidden = !metaData[legendItem.labelIndex].hidden;
                chart.update();
            }
        },
        tooltips: {
            callbacks: {
                label: (tooltipItem, data) = >{
                    let dataset = data.datasets[tooltipItem.datasetIndex];
                    let index = tooltipItem.index;
                    if (dataset.label === 'outer_labels') {
                        return index + 1 + ": " + dataset.data[index];
                        //if (dataset.label === 'outside') {
                        // return outer_labels[index] + ": " + dataset.data[index];
                    } else {
                        return dataset.label + ": " + dataset.data[index];
                    }
                }
            }
        }

    }
};

var chart = new Chart('canvas', config);