pie chart inside donut chart using chart js

Question

I use chart js to draw pretty charts for my project. Now I need to draw pie chart inside donut chart like this:

Data in donut chart doesn't depending on data in pie chart that inside. Color also doesn't matter. Does anyone have ideas?

I can only draw pie chart and donut chart separately))

function drawOperatorStatusChart(labels, data, title, colors) {

new Chart(document.getElementById("pie_chart_operator"), {
    type: 'pie',
    data: {
        labels: labels,
        datasets: [{
            label: data,
            backgroundColor: colors,
            data: data
        }]
    },
    options: {
        tooltips: {
            callbacks: {
                label: function (tooltipItem, data) {
                    return secondsToHHMMSS(data['datasets'][0]['data'][tooltipItem['index']]);
                }
            }
        },
        title: {
            display: true,
            text: title
        }
    }
});
}

function drawReportDetailedDoughnutChart(labels, data, title, colors) {

var ctx = document.getElementById('operator_detailed_doughnut_chart').getContext('2d');

new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: labels,
        datasets: [{
            label: "",
            backgroundColor: colors,
            data: data
        }]
    },
    options: {
        responsive: true,
        legend: {
            position: 'top',
        },
        title: {
            display: true,
            text: title
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});
}

@lovemyjob, added code which I use to draw charts separately — Den B
@lovemyjob, check your sample, please. it just shows dougnut chart. But thank you I understand the idea. You can answer this question and I'll mark answer as correct — Den B

lovemyjob lovemyjob · Accepted Answer · 2018-05-10T13:20:15

I would experiment with position absolute.

See a sample of my idea: http://jsfiddle.net/zteak2uq/

<canvas class="absolute" id="standChart"></canvas>

pie chart inside donut chart using chart js

1 Answers