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 createLabelAndCircle(chart, chartVal){
  var chartLabel, chartCircle;
  //var circleR = 5.0;
	if(chart) {
    var pxX = chart.xAxis[0].toPixels(chartVal.plotX, true);
    var pxY = chart.yAxis[0].toPixels(chartVal.plotY, true);

  	chartLabel = chart.renderer.label('', pxX, pxY)
      .attr({
      padding: 10,
      r: 10,
      fill: Highcharts.getOptions().colors[3],
      zIndex: 9999
    })
      .css({
      color: '#FF0000'
    })
      .add();
      
    /*var pixelX = chart.xAxis[0].toPixels(chartVal.plotX);
    var pixelY = chart.yAxis[0].toPixels(chartVal.plotY);
    var pixelR = chart.xAxis[0].toPixels(circleR) - chart.xAxis[0].toPixels(0); */
    
   chartCircle = chart.renderer.circle(pxX, pxY, 10).attr({
        fill: Highcharts.getOptions().colors[6],
        stroke: 'black',
        'stroke-width': 1
        }).add();
  }
  return {chartLabel:chartLabel,chartCircle: chartCircle} ;
}
function showToolTip(currentIndex){
   debugger;
	var chart1Val = findVal(currentIndex, chart1.series[0].points);
  var chart2Val = findVal(currentIndex, chart2.series[0].points);

  if(!chart1.chartLabel && !chart1.chartCircle) {
    var chart1Obj = createLabelAndCircle(chart1, chart1Val);
    chart1.chartLabel = chart1Obj.chartLabel;
    chart1.chartCircle = chart1Obj.chartCircle;
  }
  if(!chart2.chartLabel && !chart2.chartCircle) {
    var chart2Obj = createLabelAndCircle(chart2, chart2Val);
    chart2.chartLabel = chart2Obj.chartLabel;
    chart2.chartCircle = chart2Obj.chartCircle;
  }

    var px1X = chart1.xAxis[0].toPixels(chart1Val.plotX, true);
    var px1Y = chart1.yAxis[0].toPixels(chart1Val.plotY, true);

  chart1.chartLabel
    .translate(chart1Val.plotX, chart1Val.plotY)
    .show()
    .attr({
    text: 'x: ' +...