4

I am using chartjs and am trying to add the value of the the data array in the data object to the chart. I mean that if the data array looks like this [1,4,5] that on the pie chart over the relevant section would show the value. so in this case the biggest 'slice of the pie' should have the number 6. Currently it only shows the number when you hover over the pie.

I hope this makes sense. Please see code below.

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['a', 'b', 'c'],
        datasets: [{
            label: '# of Followers',
            data: [1,4,6],
            backgroundColor: [
                'rgba(255, 99, 132, 0.9)',
                'rgba(54, 162, 235, 0.9)',
                'rgba(255, 206, 86, 0.9)',
                'rgba(75, 192, 192, 0.9)',
                'rgba(153, 102, 255, 0.9)',
                'rgba(255, 159, 64, 0.9)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 5
        }]
    },
    options: {
     responsive: false
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>
  • Possible duplicate of [How to display pie chart data values of each slice in chart.js](http://stackoverflow.com/questions/33363373/how-to-display-pie-chart-data-values-of-each-slice-in-chart-js) – Aniko Litvanyi Oct 12 '16 at 08:46

1 Answers1

0

Use this:

$scope.options = {
          tooltipEvents: [],
          showTooltips: true,
          tooltipCaretSize: 0,
          onAnimationComplete: function () {
              this.showTooltip(this.segments, true);
          },
      }

Then refer it properly to HTML element..!!!

Mohit K
  • 247
  • 2
  • 7