Vince Vince - 1 month ago 8
Javascript Question

In Highstocks, how do I change the default time/day labels when hovering over graph?

I have managed to change the default x-axis labels in highcharts/highstocks with a formatter function, but despite looking in the API I cannot figure out how to change the on-hover title (Example: When I hover over the columns for 'Mark' in the graph, it reads 'Thursday ..' along with the correct values for Mark. But I want it titled 'Mark', along with the values). How do I change this? (I want to use highstocks (not highcharts) because I have much more data than presented)

<html>
<body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<div id="container"></div>
</body>
<head>

<script type="text/javascript">
var newLabels = ['Marky', 'Ricky', 'Danny', 'Terry', 'Mikey'];
$('#container').highcharts('StockChart', {
chart: {
type: 'column'
},
credits: {
enabled: false
},
xAxis: {
categories: ['Marky', 'Ricky', 'Danny', 'Terry', 'Mikey'],
labels: {
rotation: -45,
formatter: function() {
return newLabels[this.value];
}},
},
title: {
text: 'Anything But the Index'
},
series: [
{name: '1',data:[0.067028837967,0.0,0.0]},
{name: '1a',data:[0.187515270425,0.18818380744,0.0857142857143]},
{name: '1b',data:[0.31600895865,0.0,0.169987200178,0.399354014733,0.0873578570502]},
{name: '2',data:[0.0,0.0,0.0,0.0,1.0]},
{name: '3',data:[0.998898678414,1.0,1.0,0.998898678414,1.0]},
{name: '4',data:[0.0,0.0,0.0,0.0,0.3]},
{name: '6',data:[0.505930477918,0.0,0.190192368338,0.597371635879,0.285892370193]},
],
scrollbar: {
enabled: true,
},
navigator: {
series: {
type: 'areaspline',
}},

rangeSelector: {
enabled:false,
},
});
</script>
</head>
<div id="container" style="height: 400px; min-width: 310px"></div>
</html>

Answer

So you want to customize the tooltip? This is how to do it.

https://jsfiddle.net/yfgpg5x2/12/

    tooltip: {
        formatter: function() {
            var curTickLabelString = this.points[0].series.xAxis.ticks[this.x].label.textStr;
            var tooltipString = "<b>" + curTickLabelString + ":<br></b>";
            var curName, curValue, curColor, curGraphic;
            for (var i = 0; i < this.points.length; i++) {
                curName = this.points[i].series.name;
                curValue = this.points[i].y;
                curColor = this.points[i].color;
                curGraphic = '‚óŹ';
                tooltipString += '<br>'+ curGraphic +' <b style="color: ' + curColor + '">' + curName + ':</b> ' + curValue;
            }
            return tooltipString;
        }
    },

enter image description here

Read more about tooltips here:

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