onPointHover method

  1. @protected
void onPointHover(
  1. String dataKey,
  2. String x,
  3. double y,
  4. double coordX,
  5. double coordY,
  6. double height,
)

x and y defines the x,y of the data point that is being hovered. coordX and coordY defines the x,y coordinate of the dot, in canvas/SVG absolute coordinate space. It is the starting point of the bar, which is the top left corner of a bar.

When a data point is hovered, a caption is shown near the data point. The value that is shown in the caption is formatted with labelFormatX and labelFormatY. The way you do this currently cannot be changed, but can be overridden if you want to extend this LineGraphComponent.

onHover is executed also everytime this method is executed.

Implementation

@protected
void onPointHover(String dataKey, String x, double y, double coordX, double coordY, double height) {
  var dataName = graphAliases[dataKey];
  dataName ??= dataKey;
  _captionTextElem.text = '$dataName: ($x, ${labelFormatY(y)})';
  // Increase the rectangle width to be 20 + text width.
  var textComputedWidth = _captionTextElem.getComputedTextLength();
  _captionTextElem.setAttribute('x', ((textComputedWidth + 20)/2).toStringAsFixed(3));
  _captionRectElem.setAttribute('width', (textComputedWidth + 20).toStringAsFixed(3));
  // Coordinate of the point, in SVG viewbox coord system.
  var viewBoxX = coordX + singleBarWidth/2;
  var viewBoxY = coordY + height/2;
  // How far to translate.
  var translateValueX = viewBoxX;
  var translateValueY = viewBoxY;
  var bb = _captionElem.getBBox();
  // Width, based on viewbox coordinate system.
  var widthViewBox = bb.width.toDouble();
  // Height, based on viewbox coordinate system.
  var heightViewBox = bb.height.toDouble();
  var rightestPointViewBox = viewBoxX + widthViewBox;
  var bottommostPointViewBox = viewBoxY + heightViewBox;
  // Outside range X, translate -width.
  if (rightestPointViewBox > ctx.canvas.width.toDouble()) {
    translateValueX -= widthViewBox;
  }
  // Outside range of Y too, translate -height.
  if (bottommostPointViewBox > ctx.canvas.height.toDouble()) {
    translateValueY -= heightViewBox;
  }

  _captionElem.setAttribute('transform', 'translate($translateValueX, $translateValueY)');
  _captionElem.setAttribute('visibility', 'visible');
  if (onHover != null) onHover!(x, y);
}