Renderer Hover style

author(s): Torstein Hønsi

by kzoon

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>
<p>Click a shape to bring to front</p>

JavaScript

$(function () {
    var renderer = new Highcharts.Renderer(
        $('#container')[0], 
        400,
        300
    );
    
    var rect = renderer.rect(100, 100, 100, 100, 5)
        .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'yellow'
        })
        .add();
    rect.on('mouseover', function () {
      rect.attr({
            fill: 'red'
        });
    });
   rect.on('mouseout', function () {
      rect.attr({
            fill: 'yellow'
        });
    });
      
    rect.on('click', function() {
         rect.toFront();  
     });
    
    
    var circ = renderer.circle(200, 200, 50)
        .attr({
            'stroke-width': 2,
            stroke: 'red',
            fill: 'green'
        })
        .add();
    
    circ.on('click', function() {
        circ.toFront();  
    });
});