Vince Vince - 1 year ago 96
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)

<script type="text/javascript" src=""></script>
<script src=""></script>
<script src=""></script>
<div id="container"></div>

<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: {
<div id="container" style="height: 400px; min-width: 310px"></div>

Answer Source

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

    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];
                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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download