I was using highcharts for representing a log data, due to small space I have truncated the legends, but on mouse hovering over legends I need a tooltip to show the detailed legend value.
I believe you can use labelFormatter of legend and use it to return some HTML content with title attribute which will have full name of the series. Checkout this fiddle for the same.
legend: {
useHTML: true,
labelFormatter: function () {
return '<span title="'+ this.name +'">' + this.name + '</span>' + ' (click to hide)';
}
},
Plese upvote if this works for you.
Related
I am using the latest version (9.3.2) of Highcharts as for now.
And I would like to know whether it is possible to make the text color of the two labels the same as the related pie has.
I didn't set any color in the settings and I believe it's a default color value created by highcharts itself.
You can use dataLabels.formatter function and define color for the data label as the same as for the point.
series: [{
...,
dataLabels: {
formatter: function() {
const point = this.point;
return '<span style="color: ' + point.color + '">' +
point.name + ': ' + point.y + '%</span>';
}
}
}]
Live demo: http://jsfiddle.net/BlackLabel/qnjevg7c/
API Reference: https://api.highcharts.com/highcharts/series.pie.dataLabels.formatter
Would love some help here with highcharts,i have attached an image i want to accomplish 2 things here
First: Is it possible to place the data of the yAxis in this case a day between 2 plotlines and the datalabel in between those 2 lines instead of getting crossed in the middle by it? For example i want the 30th of April under that line and the datalabel above that line as well positioned according to the day
Second: How can i change the color of the numbers to black when the color is that light green, it makes it hard to read.
You can set yAxis.type as category and use formatter to imitate dates.
Use dataLabels.formatter to change a color depending on a point value.
series: [{
...,
dataLabels: {
enabled: true,
formatter: function() {
if (this.color === '#FF00FF') {
return '<span style="color: orange">' + this.y + '</span>';
}
return this.y;
}
}
}],
yAxis: {
type: 'category'
}
Live demo: http://jsfiddle.net/BlackLabel/qxfa9b0c/1/
API Reference:
https://api.highcharts.com/highcharts/yAxis.type
https://api.highcharts.com/highcharts/series.heatmap.dataLabels.formatter
I am using Highstock chart with range selector and as well as data grouping it is working fine, but facing issue with custom tooltips in highstock chart(I am able to generate custom tooltip in highchart, but this is not wotking in highstock). Please, anyone, help me with this.
You can create a custom tooltip in Highstock in the same way as in Highcharts:
tooltip: {
formatter: function() {
return 'Custom tooltip: x: ' + this.x + ' y: ' + this.y;
}
}
Live demo: https://jsfiddle.net/BlackLabel/q7undao5/1/
API Refernce: https://api.highcharts.com/highstock/tooltip.formatter
I am looking for a sample of Javascript code to visualise pictures in a tooltip of a pie chart from Highcharts.
I would like to see different pictures according to the sectors I am navigating on...
Could you please help me?
Thanks in advance
You could enable HTML in the tooltip, and set the HTML content with a tooltip formatter.
tooltip: {
useHTML: true,
formatter: function() {
return '<img src="/your/image/path/' + this.series.name + '.png" />' + '<b>' + this.point.y + '</b>';
}
}
In this case, the image being loaded is based on on each series name. If your series were named Apples, Oranges, and Bananas, you just need to make apples.png, oranges.png, and bananas.png and set the path in that img tag appropriately.
Id like to let the user know that he can remove items from the legend by simply clicking on them. To some, this may be intuitive but others may not know that they can do that. I would like to let the users know when they over the legend item that then can click to remove it.
I am using the GWT-wrapper class for highcharts.
Thank you.
Highcharts doesn't have built-in tooltip for item legend, but still you can create your own tooltip for that. It's simple to add custom events to legendItem (mouseover and mouseout for example) and show that tooltip.
See example how to add events to elements in Highcharts: http://jsfiddle.net/rAsRP/129/
events: {
load: function () {
var chart = this,
legend = chart.legend;
for (var i = 0, len = legend.allItems.length; i < len; i++) {
(function(i) {
var item = legend.allItems[i].legendItem;
item.on('mouseover', function (e) {
//show custom tooltip here
console.log("mouseover" + i);
}).on('mouseout', function (e) {
//hide tooltip
console.log("mouseout" + i);
});
})(i);
}
}
}
There is another opportunity to get tooltips at hovering over the Highcharts legend. You just need to enable useHTML for the legend and redefine the labelFormatter function; this function should return the label text enclosed into the "span" tag. In this "span" tag one may include a class to apply jQuery-based tooltips (jQuery UI or Bootstrap for example). Also it is possible to transfer some data (for example, the index of a legend item) using the 'data-xxx' attribute:
labelFormatter: function () {
return '<span class="abc" data-index="' + this.index + '">' + this.name + '</span>';
}
Tooltips can be formatted as you wish; hyperlinks are also possible. The fiddle is here.
Although there're great answers already, I still want to share my simplified solution (inspired by the answers provided above).
If you just need a plain text tooltip, you can use title attribute of <span> (W3 School, title attribute - most often shown as a tooltip text when the mouse moves over the element.) No jQuery setup is needed then.
In your Highcharts options object set legend.useHTML: true & configure legend.labelFormatter:
legend: {
enabled: true,
useHTML: true,
labelFormatter: function () {
// if legendTooltip set, put it into title attr
if (this.options.custom && this.options.custom.legendTooltip) {
return '<span title="' + this.options.custom.legendTooltip + '">' + this.name + '</span>';
}
return '<span>' + this.name + '</span>';
}
},
And add custom.legendTooltip to the options object of a series you want a tooltip for:
series: [{
name: 'counter',
data: [110, 50, 130],
custom: {
// provide a tooltip text here:
legendTooltip: "Counter custom tooltip"
}
}]
(using custom obj is recommended by Highcharts)
Also see the JS fiddle: http://jsfiddle.net/uhocybpj/8/
You can do that.
At first, Highcharts has callback function.
https://stackoverflow.com/a/16191017
And modified version Tipsy can show tooltip in SVG.
http://bl.ocks.org/ilyabo/1373263
*Use jquery.tipsy.js and tipsy.css on this page.
Then, start highcharts like this.
$('#your-chart').highcharts(your_chart_options,function(chart){
$('#your-chart').find('.highcharts-legend-item').each(function(){
// set title text example
var _text = $(this).text(),
_title = '';
switch(_text){
case "legend 1":
_title = 'legend 1 title';
break;
case "legend 2":
_title = 'legend 2 title';
break;
}
// add <title> tag to legend item
$(this).append($('<title></title>').text(_title));
});
$('#your-chart').find(".highcharts-legend-item").tipsy({
gravity: 's',
fade: true
})
});