CODEWITHSUNDEEP
javascriptchart.js
Bruno Gonçalves
Bruno Gonçalves

Reputation: 55

Show values on each arc doughnut Chart.js

I'm doing one graphic with chart.js and i can put the graph working but i wanted to show the values on each arc of the graph and i can´t. I saw everything that i looked on the internet and nothing helped me.

Instead of having the tooltips i wanted to have the data on each arc. Is that possible?

My code: 

var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var car = {
labels: ["January", "February", "March", "April", "May"],
datasets: [{
    data: [
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
      randomScalingFactor(),
    ],
    backgroundColor: [
        window.chartColors.red,
        window.chartColors.orange,
        window.chartColors.yellow,
        window.chartColors.green,
        color(window.chartColors.black).alpha(0.4).rgbString()
    ],borderColor: [
      'white',
      'white',
      'white',
      'white',
      'white'
    ],
    borderWidth: 5,

}],

  };


window.onload = function() {
var ctx = document.getElementById("chart-area").getContext("2d");
window.myDoughnut = new Chart(ctx, {
  type: 'doughnut',
  data: car,
  showDatapoints: true,
  options: {
    scaleShowLabels: true,
      responsive: true,
      legend: {
          position: 'bottom',
      },
      title: {
          display: true,
          text: 'Idades',
          fontSize:20
      },
      animation: {
          animateScale: true,
          animateRotate: true
      }
  }
});

};

this is what i have: https://i.sstatic.net/7avqG.jpg

this is what i pretend: https://i.sstatic.net/zNDHL.jpg

Can someone help me?

Upvotes: 0

Views: 13363

Answers (1)

ɢʀᴜɴᴛ
ɢʀᴜɴᴛ

Reputation: 32869

Yes! That's absolutely possible.

Though you could create your own plugin but, I would suggest using a ChartJS plugin called Chart.PieceLabel.js , which makes it much more easier to accomplish.

usage add the following in your chart options

pieceLabel: {
    mode: 'value'
}


var randomScalingFactor = function() {
    return Math.round(Math.random() * 100);
};
var ctx = document.getElementById("chart-area").getContext("2d");
var myDoughnut = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ["January", "February", "March", "April", "May"],
        datasets: [{
            data: [
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
                randomScalingFactor(),
            ],
            backgroundColor: ['#ff3d67', '#ff9f40', '#ffcd56', '#4bc0c0', '#999999'],
            borderColor: 'white',
            borderWidth: 5,
        }]
    },
    showDatapoints: true,
    options: {
        tooltips: {
            enabled: false
        },
        pieceLabel: {
            mode: 'value'
        },
        responsive: true,
        legend: {
            position: 'bottom',
        },
        title: {
            display: true,
            text: 'Idades',
            fontSize: 20
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<script src="https://cdn.rawgit.com/emn178/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<canvas id="chart-area"></canvas>

Upvotes: 4

Related Questions