Highcharts/Highmaps - эффект Halo при наведении курсора не работает в хромированном и firefox

Question

Пожалуйста, проверьте приведенный ниже jsfiddle.

http://jsfiddle.net/ErU8H/537/

вар gfxPath = 'http://www.highcharts.com/components/com_demo/assets/demo/gfx/';

вар диаграмма = новый Highcharts.Chart ({

chart: { 
    renderTo: 'container' 
}, 

title: { 
    text: 'Pattern fill plugin demo' 
}, 

xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
}, 

yAxis: { 
    plotBands: [{ 
     from: 100, 
     to: 200, 
     color: { 
      pattern: gfxPath + 'pattern3.png', 
      width: 6, 
      height: 6 
     } 
    }] 
}, 

series: [{ 
    type: 'area', 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], 
    fillColor: { 
     pattern: gfxPath + 'pattern1.png', 
     width: 6, 
     height: 6 
    }, 
    states: { 
         hover: { 
          halo: { 
           size: 8, 
           opacity: 1, 
           zIndex:10, 
           attributes: { 
            fill: '#ffffff', 
            'stroke-width': 1, 
            stroke: '#0b9de8' 
           } 
          } 
         } 
        } 
}, { 
    type: 'column', 
    data: [148.5, 216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6], 
    color: { 
     pattern: gfxPath + 'pattern2.png', 
     width: 6, 
     height: 6, 
     // VML only: 
     color1: 'red', 
     color2: 'yellow' 
    } 
}] 

});

Эффект ореола при наведении курсора не обрабатывается должным образом в хроме и firefox только при использовании плагина заливки рисунка. Я использую шаблоны и в то же время хотел реализовать эффект ореола при наведении курсора. Любая помощь в этом ?.

Answer 1

Просто установите выше zIndex для гало: http://jsfiddle.net/ErU8H/542/

states: { 
     hover: { 
      halo: { 
       attributes: { 
        zIndex: 10 
       } 
      } 
     } 
    }