score:2

Accepted answer

$(function() {
  $('#container4').highcharts({
    chart: {
      type: 'column',
      events: {
        click: function(e) {
          console.log(e);
        },
        selection: function(e) {
          console.log(e);
        }
      }
    },
    title: {
      text: ''
    },
    legend: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    xaxis: {
      gridlinecolor: '',
      labels: {
        enabled: false
      }
    },
    yaxis: {
      title: {
        text: 'fruit'
      },
      visible: false
    },
    credits: {
      enabled: false
    },
    plotoptions: {
      /*series: {
      allowpointselect: true,
      states: {
      select: {
      color: 'blue',
      }
      }
      },*/
      column: {
        stacking: 'normal',
      }
    },
    series: [{
      name: '',
      data: [-40, -60, -70, -80, -90, -100, -100, -100, -100, -100, -100],
      threshold: 0,
      color: '#e0e0e0 ',
      enablemousetracking: false,
    }, {
      name: '',
      data: [-60, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50],
      threshold: 0,
      color: 'green',
      negativecolor: 'red',
    }, ]
  });
});

$(document).on('click', '.highcharts-tracker rect', function() {
  var elm = $(this);
  if (!elm.attr('class')) {
    $('.highcharts-tracker rect').removeattr('class').css('opacity', 0.5);
    elm.attr('class', 'active').css('opacity', 1);

    $('#pointer').show().
    offset({
      top: elm.offset().top - 30,
      left: elm.offset().left + 10
    })

  }
});

$('#pointer').click(function() {
  $('.highcharts-tracker rect').removeattr('class').css('opacity', 1);
  $(this).hide()
})
.highcharts-series rect {
  transition: all .3s ease;
}

#pointer {
  height: 30ph;
  width: 10px;
  display: noone;
  background-color: blue;
}
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container4"></div>
<div id="pointer">x</div>


Related Query

More Query from same tag