score:16

Accepted answer

Just went through the code on their sample. It appears that an object in the data set array should have the following structure

{
            data: [
                <a number>,
                <a number>,
                ...
            ],
            backgroundColor: [
                <a colour>,
                <a colour>,
                ...
            ],
            label: 'Unique label for this data set
}

I have created the below snippet for you.

var config = {
  type: 'doughnut',
  data: {
    datasets: [
     /* Outer doughnut data starts*/
    {
      data: [
        10,
        20,
        30
      ],
      backgroundColor: [
        "rgb(255, 0, 0)", // red
        "rgb(0, 255, 0)", // green
        "rgb(0, 0, 255)", //blue
      ],
      label: 'Doughnut 1'
    },
    /* Outer doughnut data ends*/
    /* Inner doughnut data starts*/
    {
      data: [
        45,
        25,
        11
      ],
      backgroundColor: [
        "rgb(255, 0, 0)", // red
        "rgb(0, 255, 0)", // green
        "rgb(0, 0, 255)", //blue
      ],
      label: 'Doughnut 2'
    }
    /* Inner doughnut data ends*/
    ],
    labels: [
      "Info 1",
      "Info 2",
      "Info 3"
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Chart.js Doughnut Chart'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    },
    tooltips: {
      callbacks: {
        label: function(item, data) {
        console.log(data.labels, item);
            return data.datasets[item.datasetIndex].label+ ": "+ data.labels[item.index]+ ": "+ data.datasets[item.datasetIndex].data[item.index];
        }
    }
}
  }
};
window.onload = function() {
  var ctx = document.getElementById("myChart")
    .getContext("2d");
  window.myDoughnut = new Chart(ctx, config);
};
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.js"></script>
</head>

<body>
  <canvas id="myChart"></canvas>
</body>

</html>


Related Query

More Query from same tag