1

While moving the cursor tooltip should move along with it but its in a fixed position. How to resolve it?

I am using chart JS to plot the graph.. In this example, we create a double doughnut for a 2 dataset and render that in our page. You can see all the ways to use Chart.js.

JS FIDDLE LINK

enter image description here

    var config = {
     type: 'doughnut',
     data: {
     datasets: [
      /* Outer doughnut data starts*/
     {
       data: link_count,
       backgroundColor: [
         "rgb(87, 193, 123)", // red
         "rgb(111, 135, 216)", // green

        ],
       label: 'Link Status'
     },
     /* Outer doughnut data ends*/
     /* Inner doughnut data starts*/
     {
       data:proto_count,
        backgroundColor: [
         "rgb(87, 193, 123)", // red
         "rgb(111, 135, 216)", // green

        ],
       label: 'Protocol Status'
     }
     /* Inner doughnut data ends*/
     ],
     labels: label_keys
     },
     options: {
     responsive: true,
     legend: {
       position: 'top',
     },
     title: {
       display: true,
       text: 'INTERFACE STATUS'
     },
     animation: {
       animateScale: true,
       animateRotate: true
     },
     tooltips: {
         bodyFontSize: 16,
         titleFontSize : 20,
         bodyFontFamily : "Courier New",
          custom: function(tooltip) {
            if (!tooltip) return;
            // disable displaying the color box;
            tooltip.displayColors = false;
          },
       callbacks: {
         // label: function(item, data) {
         // console.log(data.labels, item);
             // return data.datasets[item.datasetIndex].label+ "</br> Status : "+ data.labels[item.index]+ "</n> Count : "+ data.datasets[item.datasetIndex].data[item.index];
         // }
          label: function(item, data) {
           var someValue = data.datasets[item.datasetIndex].label+ " : "+ data.labels[item.index];
           return someValue;
        },
        afterLabel: function(item, data) {
                var dataset = data.datasets[item.datasetIndex];
      var total = dataset.data.reduce(function(previousValue, currentValue, currentIndex, array) {
        return previousValue + currentValue;
      });
      var currentValue = dataset.data[item.index];
      var precentage = Math.floor(((currentValue/total) * 100)+0.5);  
           var someValue2 = "Count : "+ data.datasets[item.datasetIndex].data[item.index]+" ("+precentage+"%)";

           return someValue2;
        }
     }
     }
     }
     };

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

Help me out to figure out the issue and to resolve it..

Thank you in advance

Puneeth Kumar
  • 182
  • 2
  • 14
  • The code in here is not the same as in the js fiddle, it's obvious you made an attempt at it using the `custom` position tooltip, but you didn't talk much about it. Please provide a fiddle with your latest code and mention what you've tried – Adelin Jul 16 '18 at 06:14
  • you can use custom function chart js custom tooltip position https://www.chartjs.org/docs/latest/configuration/tooltip.html#position-modes, also find a similar question https://stackoverflow.com/questions/38072572/position-tooltip-based-on-mouse-position – Learner Jul 16 '18 at 06:29

0 Answers0