Nested Chart.js Doughnut

by Nofiden Noble

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="nestedDoughnut" height = "100"/>

JavaScript

var resourceChartElement = document.getElementById("nestedDoughnut");
var resourceChart = new Chart(resourceChartElement, {
    "type": "doughnut",
    "data": {
        "datasets": [{
            "backgroundColor": ["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC"],
            "hoverBackgroundColor": ["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC"],
            "data": [0.0, 0.0, 8.31, 10.43, 84.69, 0.84]
        }, {
            "backgroundColor": ["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC"],
            "hoverBackgroundColor": ["#3366CC", "#DC3912", "#FF9900", "#109618", "#990099", "#3B3EAC"],
            "data": [8.31, 95.96]
        }],
        "labels": ["Pre-Processing", "resource-group-2", "Data Services - Basic Database Days", "Data Services - Basic Database Days", "Azure App Service - Basic Small App Service Hours", "resource-group-2 - Other"]
    }
});