CODEWITHSUNDEEP
javascriptchartschart.js
Den B
Den B

Reputation: 921

pie chart inside donut chart using chart js

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

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
        }
    }
});
}

Upvotes: 1

Views: 1482

Answers (1)

lovemyjob
lovemyjob

Reputation: 579

I would experiment with position absolute.

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

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

Upvotes: 2

Related Questions