After implementing this code, I noticed that the tooltip is only showing the starting and end value. However, what I want is for the tooltip to display all values.
Is there a way to show the tooltip for all values of the high-chart? -"Starting from the first point next to the other points when hovering"
This is my complete code:
$(function() {
$('#container').highcharts({
chart: {
zoomType: 'y'
},
title: {
text: 'FlexiMc'
},
xAxis: {
type: 'datetime',
},
yAxis: {
min: 0,
//max: 90000,
title: {
text: 'Exchange rate'
}
},
legend: {
enabled: true
},
tooltip: {
valueDecimals: 2,
valueSuffix: '',
},
series: [{
type: 'line',
name: 'Current Out',
data: [
[Date.UTC(2014, 10, 12, 18, 33), 0],
[Date.UTC(2014, 10, 12, 17, 42), 0],
[Date.UTC(2014, 10, 12, 16, 40), 10.83],
[Date.UTC(2014, 10, 12, 16, 21), 14.83],
[Date.UTC(2014, 10, 12, 14, 43), 86.34],
[Date.UTC(2014, 10, 12, 13, 46), 72.35],
[Date.UTC(2014, 10, 12, 12, 40), 31.69],
[Date.UTC(2014, 10, 12, 11, 42), 133.37]
],
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2,
shared: true
}
}, {
type: 'line',
name: 'Voltage',
data: [
[Date.UTC(2014, 10, 12, 18, 33), 5.13],
[Date.UTC(2014, 10, 12, 17, 42), 219],
[Date.UTC(2014, 10, 12, 16, 40), 644],
[Date.UTC(2014, 10, 12, 16, 21), 652],
[Date.UTC(2014, 10, 12, 14, 43), 664],
[Date.UTC(2014, 10, 12, 13, 46), 628],
[Date.UTC(2014, 10, 12, 12, 40), 668],
[Date.UTC(2014, 10, 12, 11, 42), 652],
[Date.UTC(2014, 10, 12, 10, 46), 648]
],
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2,
shared: true
}
}]
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>