v3.8.0: Odd behavior for tooltip on horizontal bar with overlaying bars

[CFDev22]

Hello, everyone.

I followed the instructions for making a horizontal bar chart, then different instructions (YT video) on how to overlay one bar on top of another (see pic.)

The issue is that if the cursor is within any bar, then what appears in the tooltip depends not on what bar is being hovered over, but whether the cursor is in the left half or right half of the bars area. Weird.

Here is my code:

var povCustSat = document.getElementById('custSat'),

povCS = new Chart(povCustSat,{ 
	type: 'bar',
	data: {
		labels: [''],
		datasets: [{
			label: 'Actual',
			data: [98.7],
			categoryPercentage: 0.3, 
			backgroundColor: '#98b9d2',
			borderColor: '#5393b9',
			borderWidth: 1, 
			grouped: false
		},{
			label: 'Goal',
			data: [95.0], 
			categoryPercentage: 0.5,
			backgroundColor: '#cad692',
			borderColor: '#afbe3f',
			borderWidth: 1
		}]
	}, 
	options: {
		indexAxis: 'y',
		plugins: {
			legend: {
				position: 'left'
			},
			title: {display: false}, 
			tooltip: {
				callbacks: {
					label: function(tooltipItem,data){  
						var label = povCS.data.datasets[tooltipItem.datasetIndex].label;
						var tvalue = povCS.data.datasets[tooltipItem.datasetIndex].data[tooltipItem.dataIndex].toFixed(1) + "%";
						return label + ": " + tvalue;
					}
				}
			}
		},
		scales: {
			x: {
				ticks: {display: false},
				grid: {display: false}
			},
			y: {
				beginAtZero: true,
				min: 0,
				max: 100,
				ticks: {display: false},
				grid: {display: false}
			}
		}
	}
});

Any thoughts on why this is happening are appreciated.

Also, there is one vertical and one horizontal light grey line to the left and below the chart. Using 'grid' display: false didn't remove them.

V/r,

CFDev22

2

[Udemology]

For hovering you can use tooltip mode index (this topic needs a video).

interaction: {
  intersect: false,
  mode: 'index',
},

https://www.chartjs.org/docs/3.8.0/samples/tooltip/interactions.html

For scale borders are still showing. Gridlines removes only the lines excluding the x and y scale lines.
This video dissect them all: https://youtu.be/ag2spehcL84

scales: {
  x: { 
   grid: {
      drawBorder: false
    }
  } 
} 

[CFDev22]

Hi, Udemology!

Thank you for your advice. Unfortunately, it's not working. I don't know if it's the way I'm implementing ChartJS (copied code from CDN, saved to a .js file and am including it), or if I've found a bug of some sort.

You know how when the cursor moves from one bar to another, the bar that the cursor is over is a little brighter as the bar the cursor was over gets a bit dimmer? This isn't happening. If the cursor is over either bar but is on the left side of the chart, the green bar gets brighter. If the cursor is over either bar on the right half of the chart, the blue bar gets brighter.

I don't have a way of recording the action. Network security is too tight.

Also, I tried your suggestion of drawBorders: false, but it didn't work. I still see really faint grey lines on x and y axes.

scales: {
	x: {
		ticks: {display: false},
		grid: {display: false},
		drawBorders: false
	},
	y: {
		beginAtZero: true,
		min: 0,
		max: 100,
		ticks: {display: false},
		grid: {display: false},
		drawBorders: false
	}
}

V/r,

CFDev22

PS.. I moved the drawBorders: false inside the grid:, no change.

[kurkle]

The drawBorder (wihtout s) option goes in the grid section.
So grid: {display: false, drawBorder: false}, should work.

[CFDev22]

Ah! Thank you, kurkle. That fixed that.

V/r,

CFDev22

[kurkle]

For the interaction, see: https://codepen.io/kurkle/pen/wvmqjpG

[Udemology]

Sorry my mistake. Not paying attention by adding a 's' on the drawBorder. I have corrected it. Just incase anyone would read it.

[CFDev22]

I fixed it. Didn't know what I was doing, but played around with it, and now it works as expected.

I added interaction to the options. Here's all the relevant code.

<div style="width: 540px; height: 150px">
	<canvas id="custSat" style="width: 540px; height: 150px; border: 1px solid gold;"></canvas>
</div>

var povCustSat = document.getElementById('custSat'),
povCS = new Chart(povCustSat,{
	type: 'bar',
	data: {
		labels: [''],
		datasets: [{
			label: 'Actual',
			data: [98.7],
			categoryPercentage: 0.3,
			backgroundColor: '#98b9d2',
			borderColor: '#5393b9',
			borderWidth: 1,
			order: 0, 
			grouped: false
		},{
			label: 'Goal',
			data: [95.0], 
			categoryPercentage: 0.5,
			backgroundColor: '#cad692',
			borderColor: '#afbe3f',
			borderWidth: 1, 
			order: 1,
			grouped: false
		}]
	}, 
	options: {
		interaction: {
			mode: 'point',
			axis: 'x'
		},
		responsive: true,
		indexAxis: 'y',
		plugins: {
			legend: {
				position: 'left'
			},
			title: {display: false}, 
			tooltip: {
				interaction: {
					intersect: false,
					mode: 'point'
				},
				callbacks: {
					label: function(context){
						return ' ' + context.dataset.label + ': ' + context.dataset.data[0].toFixed(1) + '%';
					},
					title: function(context){
						return "POV Customer Satisfaction";
					}
				}
			}
		},
		scales: {
			x: {
				ticks: {display: false},
				grid: {display: false, drawBorder: false}
			},
			y: {
				beginAtZero: true,
				min: 0,
				max: 100,
				ticks: {display: false},
				grid: {display: false, drawBorder: false}
			}
		}
	}
});

Thank you, Udemology and kurkle, for your help.

V/r,

CFDev22

[souljorje]

this worked for me

interaction: {
	axis: 'y',
},