In highchart general drawing make svg label zoomable on mouse hover

Question

render = this.renderer,
colors = Highcharts.getOptions().colors;
                render.label("On_Mouse_Hover_Zoom",100,50).attr({'stroke-
width':1,stroke:'red'}).css({fontSize:'10px'}).add();

output of this code is like enter image description here

Is there any way to make this label zoomable or increase label size temporary on mouse hover but it should not loose its actual size.

Answer 1

You can make it simply with css:

  var label = this.renderer.label("On_Mouse_Hover_Zoom", 0, 0)
  .attr({
    'stroke-width': 1,
    stroke: 'red',
    id: 'your-label'
  })
  .css({
    fontSize: '10px'
  })
  .add();

  #your-label:hover text {
   fill: #efefef;
   font-size: 20px;
   transition: 0.2s;
  }

or use javascript but this approach is less efficient:

document.getElementById('your-label').onmouseenter = function() {
  label.attr({
    transform: 'scale(1.2)'
  });
}

document.getElementById('your-label').onmouseleave = function() {
  label.attr({
      transform: 'scale(1)'
  });
}

You can take a look at the example here: https://jsfiddle.net/wchmiel/p0c1v5w3/