I've realized a drilldown of mappies (with display of mini charts when clicking on the region) and it works very well.
I have a small problem :
on the higher level, when the mouse is over the region, informations are displayed in the tooltip (and if I clic, a mini chart is displayed). If I hover the region name label, a tooltip shows 'click to drilldown'. Everything is OK on this level.
on the sublevel (when clicking on the region name from the higher level map), the map of the lower level is displayed and informations are displayed in the same way as for the upper level : mouse over the region -> informations are displayed in the tooltip (that is what I want). But when the mouse is over the name of the region, the tooltip with 'click to drilldown' is shown again and I would like that nothing appear at this level (because I can't drilldown again).
An example is here
clic on 'Auvergne-Rhône-Alpes' : the map of the french region is displayed. Now go over the label 'Ain' : I would like no tooltip to be displayed on this label (only the tooltip over the blue color around the label).
If I try to disable the tooltip, no more tooltip is displayed (nor the informations tooltip, neither 'clic to drilldown'). I want the informations tooltip continue to be displayed but not the 'clic to drilldown' at this level.
I tried to do a close behavior that I expect with this code but it fixed the position of the tooltip. I want the tooltip to continue to be displayed near the mouse cursor.
tooltip: {
useHTML: true,
pointFormat: '<span class="f32">'+level+'</span>',
positioner: function () {
var content = this.label.text.textStr;
if(content.indexOf('<span class="f32">2</span>')>0)
return { x: 0, y: -100 };
else
return { x: 0, y: 250};
}
},
Any ideas about that ?
Kind regards
I think that you should use the tooltip.formatter (not the tooltip config nested in the series config object) callback which allows setting displayed tooltip formats.
Demo: https://jsfiddle.net/BlackLabel/kg30con5/
tooltip: {
formatter() {
console.log(this)
if (this.series.mapTitle) {
var hoverVotes = this.hoverVotes; // Used by pie only
var libRegion = this.LIB_REGION;
if (libRegion == undefined) {
libRegion = this.point.properties.name;
}
return "<b>" + libRegion + "</b><br/>" +
"<hr/><b><i>Nb_Femmes : </b></i> " + unit_pre + Highcharts.numberFormat(this.point.value, mes_prec) + unit_suf +
"<br/><i>Click to display more informations</i>";
} else {
if (level === 1) {
return this.series.name
} else {
return false
}
}
}
},
API: https://api.highcharts.com/highcharts/tooltip.formatter
Related
I have a Highcharts area graph with multiple points. Part of these point are special and therefor are shown by a symbol (image).
When there are other points which are very near a special point, it is very difficult to display the tooltip of the special point. Instead it displays the tooltip of the other point, even when the mouse pointer is right on the special point.
Is it possible some how to make the special point more sensitive to the mouse pointer, so that the it's tooltip will overcome when I move my mouse over it's symbol (image).
Here is an example of what I mean (jsfiddle) - jsfiddle.net/orenise/cgz7t3yq/30 When I go over the sun marker, I wish to be focus on it, and the way it now works is that if I have other points near it, they might get the focus
You can disable the hover state for those points and switch off the tooltip for them using the tooltip.formatter callback.
Disable hover:
{
x: 1584339600,
y: 24,
id: 'noTooltip',
marker: {
states: {
hover: {
enabled: false
}
}
},
},
Tooltip customization:
tooltip: {
formatter() {
var output = `<span style="font-size: 10px">${Highcharts.time.dateFormat('%A, %b %e, %H:%M:%S', this.key)
}</span><br>
<span style="color:${this.point.color}">●</span> ${this.point.series.name}: <b>${this.point.y}</b><br/>`
if (this.point.id === 'noTooltip') {
return false
} else {
return output
}
}
},
Demo: https://jsfiddle.net/BlackLabel/zbcvLjx3/
API: https://api.highcharts.com/highcharts/tooltip.formatter
API: https://api.highcharts.com/highcharts/series.line.marker.states.hover.enabled
is it possible to link/sync 2 chart data in 2 different type of charts to show tooltips at once?
for an example, i have a pie chart and a area chart.
The pie chart represents the percentage of a particular browser and the area chart shows the downloads per year for each browser.
What i need to do is if someone clicks or hovers on section of the pie the relevant line and the tooltip of the area chart should be highlighted...
so when someone clicks/hovers on firefox on the pie, the line relevant to the area should show and vice versa...
is this something possible with highcharts?
So far the work i have done is https://jsfiddle.net/livewirerules/a9tntdam/1/
One thing that i noticed is i have added the event in my area chart to show the color when the tooltip is hovered.
events: {
tooltipRefresh: function(e) {
if (!e.target.hoverSeries) return;
$('.highcharts-tooltip>path:last-of-type')
.css('fill', e.target.hoverSeries.color);
}
}
when i hover a line on the area chart and move to the pie chart, the background color of the tooltips are changed.
I am not sure what would you like to show in a tooltip when you hover on your pie. You have one point so its hard to show tooltip for whole series on another chart.
You can use mouseOver and mouseOut events callback functions for highlighting series (so they will look like on hover):
point: {
events: {
mouseOver: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('hover');
}
});
},
mouseOut: function() {
var name = this.name;
Highcharts.each(chart2.series, function(s) {
if (name === s.name) {
s.setState('');
}
});
}
}
},
You can use tooltip.refresh(point) for refreshing tooltip on specific point:
mouseOver: function(e) {
this.group.toFront();
this.markerGroup.toFront();
var name = this.name;
Highcharts.each(chart.series[0].data, function(p) {
if (name === p.name) {
p.setState('hover');
chart.tooltip.refresh(p)
}
});
},
Here you can see an example how it can work:
http://jsfiddle.net/a9tntdam/4/
I have a stock chart with the fixed tooltip like the one shown in the stock tooltip positioner example. Now I want to add some flags on the series. Each flag's tooltip should be adjacent to the flag when it is "mouse over", like the default positioning/format of a tooltip. Also, each flag's tooltip has its own text and should not affect the fixed tooltip when displayed (eg. the fixed tooltip would show the stock price and the flag tooltip would show some text associates with the flag)
Do you have any related sample code I can take a look at? thx!
This is not directly supported but possible to achieve, take a look: http://jsfiddle.net/hzYhQ/2/
1) Add custom property for a chart with mouseout/mouseover events for flags:
plotOptions: {
flags: {
events: {
mouseOver: function(){
this.chart.flagTooltip = true;
},
mouseOut: function(){
this.chart.flagTooltip = false;
}
}
}
}
2) Add checking where tooltip should be displayed according to that flag:
positioner: function (w,h,p) {
var x = 10,
y = 35;
if(this.chart.flagTooltip) {
x = p.plotX;
y = p.plotY;
}
return { x: x, y: y };
}
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
})
});
using Highchart I'd like to select series by clicking on it and change its width on selection ( so we can see it is selected)
the thing is, the selection seems to work (it toggles the selected value displayed in console) but I can't figure out how I can set a lineWidth from the click event :
the example is working to select series :
line: {
events: {
click: function(event) {
this.select();
console.log( this.name+", selected : "+ this.selected);
return false;
}
}
}
I can also show / hide series, but how can I change the lineWidth ?
I managed to display the tooltip only for selected series, but I need those series to be more visible than the others.
I've tried to add a select state on the series as it works on markers but it doesn't seem to work for lines :
series: {
states: {
select: {
lineWidth: 10
}
},
...
}
Use setState instead.
this.setState(this.state === 'select' ? '' : 'select');
Demo