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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.