CODEWITHSUNDEEP
javascriptchart.js
Pedro Henrique Kuzminskas
Pedro Henrique Kuzminskas

Reputation: 193

Put the value into the doughnut chart

I need to input the value of the first percentage into the chart, like this image Example

In this case, put the value of pedro(33%) within the chart. I am beginner with chartJS and do not know it completely. Is it possible to do that?

var randomScalingFactor = function() {
  return Math.round(Math.random() * 100);
};

var config = {
  type: 'doughnut',
  data: {
    datasets: [{
      data: [
        33,
        67,
      ],
      backgroundColor: [
        "#F7464A",
        "#46BFBD",
      ],
      label: 'Expenditures'
    }],
    labels: [
      "Pedro: 33 ",
      "Henrique: 67 ",
    ]
  },
  options: {
    responsive: true,
    legend: {
      position: 'bottom',
    },
    title: {
      display: true,
      text: 'Pedro Henrique Kuzminskas Miyazaki de Souza'
    },
    animation: {
      animateScale: true,
      animateRotate: true
    },
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
            return previousValue + currentValue;
          });
          var currentValue = dataset.data[tooltipItem.index];
          var precentage = Math.floor(((currentValue / total) * 100) + 0.5);
          return precentage + "%";
        }
      }
    }
  }
};


var ctx = document.getElementById("myChart").getContext("2d");
window.myDoughnut = new Chart(ctx, config); {

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

Upvotes: 1

Views: 190

Answers (1)

c-bro
c-bro

Reputation: 486

This is not part of the default behavior. You will need to modify the chart.js script.

How to add text inside the doughnut chart using Chart.js?

Upvotes: 1

Related Questions