Highcharts Demo

author(s): Torstein Hønsi

by Sillvva

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

<div>X-Coordinate: <span id='X'>0</span></div>
<div>Y-Coordinate: <span id='Y'>0</span></div>
<div>X value: <span id='x-value'>0</span></div>
<div>Y value: <span id='y-value'>0</span></div>
<div>Is inside plot: <span id='is-inside'>false</span></div>

CSS

.highcharts-tooltip span {
    width:200px!important;
    overflow: hidden;
    white-space: nowrap !important;
    text-align: center;
}

JavaScript

var x;

$(function() {
  $('#container').highcharts({

    tooltip: {
      crosshairs: true,
      shared: true,
      followPointer: true,
      padding: 5,
      useHTML: true,
      positioner: function() {
        return {
          x: Math.max(this.chart.plotLeft, Math.min(this.chart.chartWidth - 220, x - 82)),
          y: this.chart.chartHeight - 30
        };
      },
      formatter: function() {
        return new Date(this.x).toLocaleString();
      },
      style: {
        backgroundColor: '#000'
      }
    },

    legend: {
      enabled: false
    },

    series: [{
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }, {
      data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
    }]
  });

  $('#container').bind('mousemove', function(e) {
    var chart = $(this).highcharts();
    e = chart.pointer.normalize(e);

		x = e.chartX;
  });
})