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().show();
        
  }
  return {chartLabel:chartLabel, chartCircle: chartCircle};
}


function showToolTip(currentIndex){
	var chart1Val = findVal(currentIndex, chart1.series[0].points);
  var chart2Val = findVal(currentIndex, chart2.series[0].points);

var adjArray = [-30, -5, 25, 50, 75, 100, 125, 150, 175, 200];
  debugger;
    var pxX = chart1.xAxis[0].toPixels(chart1Val.x, true);
    var pxY = chart1.yAxis[0].toPixels(chart1Val.y + adjArray[9-1], true);
    var seriesText = '<br>This is String';
    var text1 = 'x: ' + chart1Val.x + ', y: ' + chart1Val.y+ seriesText+1 + seriesText+2 + seriesText+3 + seriesText+4 + seriesText+5 + seriesText+6 + seriesText+7 + seriesText+8;
    
    if(chart1.chartLabel){
    	chart1.chartLabel.hide();
    }
    
    chart1.chartLabel = chart1.renderer.label('', pxX, pxY, 'callout', chart1Val.plotX + chart1.plotLeft, (chart1Val.plotY + chart1.plotTop))
      .css({
            color: '#FFFFFF'
        })
        .attr({
            fill: Highcharts.getOptions().colors[3],
            padding: 8,
            r: 5,
            zIndex: 6
        })
  ...