score:1

Accepted answer

Here's one approach to do that:

In the mouseover function, use the bound data's data attribute to fetch all the key values.

.on("mousemove", (d:any)=>{
    var html = '';
    that.keys.forEach(function (k) {
      html += k + ': ' + d.data[k] + '<br/>';
    });
    d3.select('.chart-tooltip')
        .html(html.trim())
}); 

And for the above to work, I assigned the keys to a variable like this:

private keys = ['one', 'two', 'three'];

Also tweaked the CSS a bit:

.chart-tooltip{
  background: red;
  color: white;
  width: 80px;
  height: auto;
}

And here's a fork of your code with the above changes:

https://stackblitz.com/edit/bar-tooltip-zcqvvt?file=src/app/bar-chart.ts

Hope this helps.


Related Query