Highcharts Demo

author(s): Torstein Hønsi

by klsakthi

HTML

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

<div id="container" style="height: 300px; min-width: 300px"></div>
<div id="container1" style="height: 300px; min-width: 300px"></div>

JavaScript

function findVal(index, myArray){
    if(index < myArray.length) {
      return {
        x: myArray[index].x, 
        y: myArray[index].y, 
        plotX: myArray[index].plotX, 
        plotY: myArray[index].plotY
      };
    }
}

function createLabel(chart, chartVal){
  var chartLabel;
	if(chart) {
  	chartLabel = chart.renderer.label('Test', chartVal.plotX, chartVal.plotY)
      .attr({
      padding: 10,
      r: 10,
      zIndex: 1000,
      fill: Highcharts.getOptions().colors[3]
    })
      .css({
      color: '#FF0000'
    })
      .add();
  }
  return chartLabel;
}
function showToolTip(currentIndex){
	var chart1Val = findVal(currentIndex, chart1.series[0].points);
  var chart2Val = findVal(currentIndex, chart2.series[0].points);

  if(!chart1.chart1Label) {
    chart1.chart1Label = createLabel(chart1, chart1Val);
  }
  if(!chart2.chart2Label) {
    chart2.chart2Label = createLabel(chart2, chart2Val);
  }


  chart1.chart1Label
    .translate(chart1Val.plotX, chart1Val.plotY)
    .show()
    .attr({
    text: 'x: ' + chart1Val.x + ', y: ' + chart1Val.y
  });
  chart2.chart2Label
    .translate(chart2Val.plotX, chart2Val.plotY)
    .show()
    .attr({
    text: 'x: ' + chart2Val.x + ', y: ' + chart2Val.y
  });
  
  chart1.xAxis[0].drawCrosshair();
}

function hideToolTip(){
 if (chart1.chart1Label) {
   chart1.chart1Label.hide();
 }
  if (chart2.chart2Label) {
    chart2.chart2Label.hide();
  }
}

var chart1 = Highcharts.chart('container', {

    title: {
        text: 'Mouse events demo - Container1'
    },
    subtitle: {
        text: 'On point mouse over or mouse out, the values should be reported in top left'
    },
    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function () {
                        var currentIndex = this.index;
                        showToolTip(currentIndex);
                    }
                }
            },
            events: {
                mouseOut:...