score:10

Accepted answer

you can control the label of the tooltip with it's callback.

if you just want to display the text of the label add this to your options:

tooltips: {
    callbacks: {
        label: function(tooltipitems, data) {  
            return data.labels[tooltipitems.index];
        }
    }
}

by the way: your snippet is not working because you didn't include chart.js. i've copied your snippet and added my change below:

var canvasp = document.getelementbyid("piechart");
var ctxp = canvasp.getcontext('2d');
var mypiechart = new chart(ctxp, {
   type: 'pie',
   data: {
      labels: ["värde 1", "värde 2", "värde 3", "värde 4", "värde 5", "värde 6", "värde 7"],
      datasets: [{
         data: [1, 5, 10, 20, 50, 70, 50],
         backgroundcolor: ["#64b5f6", "#ffd54f", "#2196f3", "#ffc107", "#1976d2", "#ffa000", "#0d47a1"],
         hoverbackgroundcolor: ["#b2ebf2", "#ffccbc", "#4dd0e1", "#ff8a65", "#00bcd4", "#ff5722", "#0097a7"]
      }]
   },
   options: {
      legend: {
         display: true,
         position: "right"
      },
      tooltips: {
        callbacks: {
          label: function(tooltipitems, data) {  
            return data.labels[tooltipitems.index];
          }
        }
      }
   }
});

canvasp.onclick = function(e) {
   var slice = mypiechart.getelementatevent(e);
   if (!slice.length) return; // return if not clicked on slice
   var label = slice[0]._model.label;
   switch (label) {
      // add case for each label/slice
      case 'värde 5':
         alert('clicked on slice 5');
         window.open('www.example.com/foo');
         break;
      case 'värde 6':
         alert('clicked on slice 6');
         window.open('www.example.com/bar');
         break;
      // add rests ...
   }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/chart.js/2.7.1/chart.min.js"></script>
<canvas id="piechart" width="400" height="400"></canvas>


Related Query

More Query from same tag