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

var VERTICAL_FIX = 15;
var CIRCLE_RADIUS = 7;
var LINE_LENGTH = 150;

var circle1, circle2;
var line1, line2;

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 createRendererItems(chart, chartVal){
  var chartLabel, chartCircle;
	if(chart) {
    var pxX = chart.xAxis[0].toPixels(chartVal.x, true);
    var pxY = chart.yAxis[0].toPixels(chartVal.y, true);
    
    chartLabel = chart.renderer.label('', pxX, pxY, 'callout', chartVal.plotX + chart.plotLeft, (chartVal.plotY + chart.plotTop))
      .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: Highcharts.getOptions().colors[3],
            padding: 8,
            r: 5,
            zIndex: 6
        })
        .add();
        
     /*chartCircle = chart.renderer.circle(pxX, pxY, CIRCLE_RADIUS)
     .attr({
          fill: Highcharts.getOptions().colors[3],
          stroke: 'black',
          'stroke-width': 1,
          zIndex: 5
      })
      .add();*/
  }
  return {chartLabel:chartLabel, chartCircle: chartCircle};
}
function showToolTip(currentIndex){
	var chart1Val = findVal(currentIndex, chart1.series[0].points);
  var chart2Val = findVal(currentIndex, chart2.series[0].points);

  if(!chart1.chartLabel && !chart1.chartCircle) {
    var chart1RendItems = createRendererItems(chart1, chart1Val);
    chart1.chartLabel = chart1RendItems.chartLabel;
   // chart1.chartCircle = chart1RendItems.chartCircle;
  }
  if(!chart2.chartLabel && !chart2.chartCircle) {
    var chart2RendItems = createRendererItems(chart2, chart2Val);
    chart2.chartLabel = chart2RendItems.chartLabel;
    //chart2.chartCircle = chart2RendItems.chartCircle;
  }


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