Seenu Seenu - 3 months ago 23
Javascript Question

Highcharts: Tooltip on Y-Axis Labels

Trying to show description about y-axis labels as tooltip.

Is it possible to show corresponding tooltips on y-axis labels?
Here is the Fiddle where I am trying to add tooltip to y-axis lables
Code:

$(function(){
var chart1;
$(document).ready(function(){
var options = {
colors: ["#3ACB35", "#DE3A15", "#FF9A00", "#00B8F1"],
chart: {
renderTo: 'container',
type: 'bar',
backgroundColor: 'black',
borderColor: 'black',
borderWidth: 0,
className: 'dark-container',
plotBackgroundColor: 'black',
plotBorderColor: '#000000',
plotBorderWidth: 0
},
credits: {
enabled: false
},
title: {
text: 'Count Per Category',
style: {
color: 'white',
font: 'normal 22px "Segoe UI"'
},
align: 'left'
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
style: {
color: '#F0F0F0'
}
},
categories: {
enabled: 'true'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0,
itemStyle: {
font: '9pt Segoe UI',
color: 'white'
},
itemHoverStyle: {
color: 'grey'
}
},
xAxis: {
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
tickInterval: 1,
labels: {
enabled: true,
style: {
color: 'white'
}
},
title: {
enabled: false
},
gridLineColor: '#222222'
},
yAxis: {
title:
{
enabled: true,
text: "Document Count",
style: {
fontWeight: 'normal',
color: 'white'
}
},
labels: {
style: {
color: 'white'
}
},
gridLineColor: '#222222'
},
exporting: {
enabled: false
},
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer'
}
},
series: []
};

options.series = [{
data: [3, 4, 4, 3, 9]
}];

chart1 = new Highcharts.Chart(options);
});
})


For each category, I have a tooltip like:
cat1: descrption1
cat2: descrption2
cat3: descrption3
cat4: descrption4

When mouse is hovered on "cat1", "description1" need to be shown as tooltip.Somewhat like below:

enter image description here

Answer

Use formatter with HTML enabled for labels: http://jsfiddle.net/W5wag/2/

    xAxis: {
        categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5'],
        tickInterval: 1,
        labels: {
            enabled: true,
            formatter: function() {
                return '<span title="My custom title">' + this.value + '</span>';
            },
            useHTML: true,
            style: {
                color: 'white'
            }
        }
    },

Of course you need store somewhere reference cat1 <-> description1 to feed span title with description.

Comments