Highstock: Hover-over Tooltip format

18 December 2015 - 1 answer

I am reading highstock documentation and its hover over formatting but it is not getting to the format I want it to be for the hover-over tooltip. What I want to do is, when the user hover over a point on the graph, it should display the name and the value such as shown here in this jsfiddle http://jsfiddle.net/w5h6rffo/7/

As you can see from the hovering over a point, the format is Date on top of the line, and the next line is Series 1: current point. I want to get rid of the Date line, how can I accomplish this ?

<HTML>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<button type="button" class="btn" onclick="graphX();">Details</button>
<div id="container" style="height: 400px; min-width: 310px"></div>
</HTML>

<CSS>
.btn {
  background: #3498db;
  border-radius: 0px;
  font-family: Arial;
  color: #ffffff;
  font-size: 12px;
  padding: 2px 2px 2px 2px;
  text-decoration: none;
  height: 30px;
  width: 70px;
  margin-top: 5px;
  margin-bottom: 5px;
  display: block;
}

.btn.active, .btn:active {
    background: #000000;
    text-decoration: none;
}
</CSS>

<JavaScript>
$('.btn').click(function() {
    $(this).toggleClass('active');
});

$(function graphX() {
  var data = [];
  for(var i = 0; i < 899; i++) {
    data[i] = {X: i};
  }

  var processedData = [];
  Highcharts.each(data, function (d) {
    processedData.push(Math.sin(d.X));
  });

  // Create the chart
  $('#container').highcharts('StockChart', {
    rangeSelector: {
      selected: 1
    },

    series: [{
      data: processedData,
      pointStart: Date.UTC(2010, 1, 1),
    }],

  });
});
</JavaScript>

I have been referring to the following documentations

http://www.highcharts.com/docs/chart-concepts/tooltip

http://api.highcharts.com/highcharts#tooltip