Error bar hover

by kzoon

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
   
</figure>

JavaScript

Highcharts.chart('container', {

  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value} °C',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {

      text: '',

    }
  }],

  tooltip: {
    //shared: true
  },

  series: [{
    name: 'Temperature',
    type: 'spline',
    color: 'black',
    lineWidth: 0,
    zIndex:11,
    "stickyTracking": false,
    "states": {
      "hover": {
        "lineWidthPlus": 0
      }
    },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
      pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
    }
  }, {
    name: 'Temperature error',
    type: 'errorbar',
    color: 'green',
       zIndex:10,
    data: [
      [2, 20],
      [5.9, 8.6],
      [6.4, 12.4],
      [10.1, 15.9],
      [18.0, 20.1],
      [21.0, 24.0],
      [23.2, 25.3],
      [26.1, 27.8],
      [23.2, 23.9],
      [18.0, 21.1],
      [12.9, 14.0],
      [7.6, 10.0]
    ],
    lineWidth: 2,
    tooltip: {
      followPointer: true,
      pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
    },

    //linkedTo: ':previous',
    states: {
      hover: {
        enabled: true,
        lineWidth: 5,        
        lineWidthPlus: 5,
        stemWidth: 5,
        color: 'red'
      }
    }
  }]
});