I switched from v2 to v3 and when I use to hover over an event (marker) a tooltip would appear and it would have text that I wrote in show up.
Now that I am on v3 I don't see this text show up anymore, I only see the date.
Is this still possible?
You can use a the tooltip formatter:
tooltip: {
formatter: function() {
return "My custom Text";
}
}
Highcharts API Tooltip Formatter
Related
I use solid-gauge of highchart
I want to send callback to click event, not on the data area but on the grey area.
(You can see this sample for understand what I mean 'grey area'. https://www.highcharts.com/demo/gauge-solid)
(I use version 4.1.7 - this is by customer design and I cannot change it, but let me know what is the options - I will 'convert' them to 4.1.7 options)
Thanks
You can add click event on a pane:
chart: {
type: 'solidgauge',
events: {
load: function() {
this.pane[0].group.on('click', function() {
console.log('Clicked on pane!')
});
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/e5muf7j1/
API Reference: https://api.highcharts.com/class-reference/Highcharts.SVGElement#on
I want to show some bars' tooltip as default (not all of them) without hovering on them. is there any way to do this?
After chart is loaded, you can use onMouseOver point's method to display a tooltip.
chart: {
events: {
load: function() {
this.series[0].points[3].onMouseOver();
}
}
}
Live demo: https://jsfiddle.net/BlackLabel/dnao0rv6/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#onMouseOver
I am using highcharts to render some data. On the yAxis I needed those values to be anchor tags and navigate to a side modal. Was able to get that working correctly by using the formatter function of the labels object. What I am trying to do now is the first cell of the table I want to disable the click events so it does not take the user to the side modal its display only.
labels{
align: 'left',
formatter: function(){
return `<a href=javascript:openModal() ${this.value} </a>`
}
}
I've tried with jquery targeting the first table cell like
$('tspan.highcharts-anchor:first').unbind();
Any suggestions are greatly appreciated
Thank you
According to the comments - there is a code which disables opening the modal on the first yAxis.label.
Demo: https://jsfiddle.net/BlackLabel/25c38ez4/
yAxis: {
labels: {
formatter: function() {
console.log(this)
if (this.isFirst) {
return this.value
} else {
return `<a href=javascript:openModal()> ${this.value} </a>`
}
}
}
}
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 Highcharts line chart going and I have tooltip enabled.
How can i customize the tooltip only for points with marker and have all the other points show the default tooltip. I need to add extra text in the tooltip for points that have markers.
I have figured out how to do that:
tooltip :{
formatter: function(a) {
if(condition)
return "custom tooltip for the marker point";
//otherwise call the defaultFormatter function this way
return a.defaultFormatter.call(this, a);
}
}