[Chartjs]-How do I get tool tips to work on 2 data set half doughnut chart?

by

0👍

✅

See this answer from Aniko Litvanyi on the same type of labeling issue. Chart JS has options for a tooltip callback function to read two sets of labels. I have included this incorporated in your chart below.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'doughnut',
  data: {

    datasets: [{
        label: "Current Score",
        data: [650, 850],
        backgroundColor: [
          'rgba(20, 127, 171, 1)',
          'rgba(255, 255, 255, 0.7)'
        ],
        labels: [
          'Label 1',
          'Label 2'
        ]
      },
      {
        label: "Score Range",
        data: [300, 600, 650, 700, 750, 800],
        backgroundColor: [
          'rgba(188, 32, 38, 1)',
          'rgba(235, 71, 35, 1)',
          'rgba(246, 142, 31, 1)',
          'rgba(254, 204, 9, 1)',
          'rgba(125, 187, 66, 1)',
          'rgba(15, 146, 70, 1)'
        ],
        labels: [
          'Very Bad',
          'Poor',
          'Fair',
          'Good',
          'Very Good',
          'Excellent'
        ]
      }
    ]
  },
  options: {
    legend: {
      display: false
    },
    rotation: 1 * Math.PI,
    circumference: 1 * Math.PI,
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          var dataset = data.datasets[tooltipItem.datasetIndex];
          var index = tooltipItem.index;
          return dataset.labels[index] + ': ' + dataset.data[index];
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Leave a comment