Shoutout to the talented @WhiteHat for the inspiration in his previous response, where I've modified his code to integrate it seamlessly with angular-google-charts in an angular 1.5 component. Here's my unique approach:
Angular-google-charts provides several directives for attaching custom events like mouseover, mouseout, ready, and more. For instance:
<div google-chart agc-on-mouseover="$ctrl.onMouseOver(row, column)"
chart="$ctrl.data" agc-on-ready="$ctrl.onReady(chartWrapper)" agc-on-mouseout="$ctrl.onMouseOut(row, column)">
</div>
Notably, I have included agc-on-ready, agc-on-mouseover, and agc-on-mouseout directives to seamlessly bind my custom functions to these events.
Building upon the solutions proposed by @WhiteHat, my custom functions are outlined below:
self.onMouseOver = function (row, column) {
if (row !== null) {
var dataTable = self.chartWrapper.getDataTable();
var xPos = self.layout.getXLocation(dataTable.getValue(row, 0));
self.svgParent.appendChild(self.hoverLine);
self.hoverLine.setAttribute('x', xPos);
// This line ensures correct positioning of the line under the tooltip
self.svgParent.insertBefore(self.hoverLine, self.svgParent.children[4]);
}
}
self.onMouseOut = function (row, column) {
if (row !== null) {
self.svgParent.removeChild(self.hoverLine);
}
}
self.onReady = function (chartWrapper) {
// Define variables for drawing the vertical line on hoverLine
self.chartWrapper = chartWrapper;
// Obtain the container using chartWrapper.getContainerId()
var container = angular.element(chartWrapper.getContainerId());
self.svgParent = container[0].getElementsByTagName('svg')[0];
self.layout = chartWrapper.getChart().getChartLayoutInterface();
self.lineHeight = self.layout.getBoundingBox('chartarea').height - 18;
self.lineTop = self.layout.getBoundingBox('chartarea').top;
self.hoverLine = container[0].getElementsByTagName('rect')[0].cloneNode(true);
self.hoverLine.setAttribute('y', self.lineTop);
self.hoverLine.setAttribute('z', 100);
self.hoverLine.setAttribute('height', self.lineHeight);
self.hoverLine.setAttribute('width', '1');
self.hoverLine.setAttribute('stroke', 'none');
self.hoverLine.setAttribute('stroke-width', '0');
self.hoverLine.setAttribute('fill', '#cccccc');
};
I trust you'll find this implementation beneficial and welcome your feedback for further enhancements.