How to make all dataset values show in tooltip at same time? #9082

danthegoodman1 · 2021-05-13T01:41:36Z

danthegoodman1
May 13, 2021

I was wondering how I might go about setting the tooltip so it always shows the values of both of the datasets on hover over a point, instead of just the dataset I am hovering over like seen in the first image. Any guidance would be greatly appreicated!

My chart:

What I want to get (tooltip showing both datasets):

Code:

<body style="background-color: #131123">
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <div>
    <canvas id="myChart" style="height: 500px;"></canvas>
  </div>
</body>

<script>
  const arrLen = 20
  const labels = new Array(arrLen)
  for (let i = 0; i < labels.length; i++) {
    labels[i] = 1+i
  }
  const leftSide = new Array(arrLen)
  for (let i = 1; i <= leftSide.length; i++) {
    leftSide[i-1] = (i*100)
  }
  console.log(leftSide)
  const rightSide = new Array(arrLen)
  for (let i = 1; i <= rightSide.length; i++) {
    rightSide[i-1] = leftSide[leftSide.length - 1]-((i-1)*100)
  }
  console.log(rightSide)
  const data = {
  labels: labels,
  datasets: [
    {
      label: 'Left side odd',
      backgroundColor: '#ff6b1b',
      borderColor: '#ff6b1b',
      data: leftSide.map((e) => (100*arrLen)/e),
    },
    {
      label: 'Right side odd',
      backgroundColor: '#00a3ff',
      borderColor: '#00a3ff',
      data: rightSide.map((e) => (100*arrLen)/e),
      color: '#fff'
    }
  ]
};
const config = {
  type: 'line',
  data,
  multiTooltipTemplate: function(valuesObject){
                /*console.log(valuesObject);*/
                // do different things here based on whatever you want;
  return valuesObject.datasetLabel+' - '+valuesObject.value+' об.';
  },
  options: {
    maintainAspectRatio: false,
    plugins: {
      legend: {
        labels: {
          color: "#eee"
        }
      }
    },
    scales: {
      y: {
        title: {
          text: 'Odds',
          display: true,
          color: '#eee'
        },
        grid: {
          color: '#444'
        },
        ticks: {
          color: '#ccc',
          stepSize: 2
        }
      },
      x: {
        title: {
          text: 'Num. Points',
          display: true,
          color: '#eee'
        },
        grid: {
          color: '#444'
        },
        ticks: {
          color: '#ccc'
        }
      }
    }
  }
};
  // === include 'setup' then 'config' above ===

  var myChart = new Chart(
    document.getElementById('myChart'),
    config
  );
</script>

Answered by LeeLenaleee

May 13, 2021

In the plugins section of your options you have to specify the tooltip mode to index like so:

options: {
  plugins: {
    tooltip: {
      mode: 'index'
    }
  }
}

Live example: https://www.chartjs.org/docs/master/samples/tooltip/interactions.html

View full answer

LeeLenaleee · 2021-05-13T18:41:09Z

LeeLenaleee
May 13, 2021
Maintainer

In the plugins section of your options you have to specify the tooltip mode to index like so:

options: {
  plugins: {
    tooltip: {
      mode: 'index'
    }
  }
}

Live example: https://www.chartjs.org/docs/master/samples/tooltip/interactions.html

1 reply

danthegoodman1 May 13, 2021
Author

Exactly what I was looking for, thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to make all dataset values show in tooltip at same time? #9082

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

How to make all dataset values show in tooltip at same time? #9082

danthegoodman1 May 13, 2021

Replies: 1 comment · 1 reply

LeeLenaleee May 13, 2021 Maintainer

danthegoodman1 May 13, 2021 Author

danthegoodman1
May 13, 2021

Replies: 1 comment 1 reply

LeeLenaleee
May 13, 2021
Maintainer

danthegoodman1 May 13, 2021
Author