code: function highlightOnHover(component) {
    if (component.plot.markers) {
      new Plottable.Interactions.Pointer().onPointerMove(function (point) {
        component.plot.markers.entities().forEach(function (e) {
          e.selection.classed('highlight', false).style('stroke', '').style('fill', '');
        });
        var target = component.plot.markers.entityNearest(point);
        if (target) {
          target.selection.classed('highlight', true).style('stroke', 'black').style('fill', 'white');
        }
      }).onPointerExit(function (point) {
        component.plot.markers.entities().forEach(function (e) {
          e.selection.classed('highlight', false).style('stroke', '').style('fill', '');
        });
      }).attachTo(component.plot.markers);
    } else {
      new Plottable.Interactions.Pointer().onPointerMove(function (point) {
        component.plot.entities().forEach(function (e) {
          e.selection.classed('highlight', false).style('fill', '');
        });
        var target = component.plot.entitiesAt(point)[0];
        if (target) {
          target.selection.classed('highlight', true).style('fill', 'lightgrey');
        }
      }).onPointerExit(function (point) {
        component.plot.entities().forEach(function (e) {
          e.selection.classed('highlight', false).style('fill', '');
        });
      }).attachTo(component.plot);
    }
  }
docs: @callback Accessor
  @param {Object} datum
  @param {number} index
  @param {Object} dataset
  
  @return {string} - html string to be rendered
   
  to overwrite default highlight color,
  add a css rule on .highlight and mark it !important. Eg.
  
  .highlight {
  stroke: anotherColor !important;
  fill: anotherColor !important;
  }