Whenever the user "mouse out" my chart, I would like a tooltip to automatically appear above one point and stay visible until the mouse returns above the chart.
series: {
events: {
mouseOut: function() {
chart.series[0].data.refresh(0);
}
}
The code above works, but the tooltip disappear after a second or two. I want it to stay visible.
Thanks!
This reassigning of the reset function should help to achieve wanted result.
Demo: https://jsfiddle.net/BlackLabel/pu9g2dft/
Highcharts.Pointer.prototype.reset = function() {
return undefined;
};
Related
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 have an application where user can select a region by clicking. Then the map rewrites itself and zoomsTo() to the selected area. So far everything else works, but I haven't get any idea how to color the selected area programmatically. The area (or different statistics) may also be selected from a drop-down list, so I have to redraw the map in any case.
var mapChart=$('#mapcontainer').highcharts();
mapChart.get(jQuery( "#selected-region" ).val()).zoomTo();
mapChart.mapZoom(5);
I have tried things along the line:
mapChart.get(jQuery( "#selected-region" ).val()).color="rgb(255,0,0)";
but so far no breakthrough :/
Any ideas?
hank
Using jquery to select point is not the best solution. Highcharts provides point events like click where you have an access to clicked point instance, or you can select a point using the chart.get() method by point id.
To change the selected area color you have to define color property when a point (area) is selected:
series: [{
states: {
select: {
color: '#a4edba'
}
}
}]
Now you have to invoke select() method on the clicked or selected point, as well as you invoked zoomTo() method:
series: [{
point: {
events: {
click: function() {
var point = this;
point.zoomTo();
point.select();
}
}
},
states: {
select: {
color: '#a4edba'
}
}
}]
});
Demo:
https://jsfiddle.net/wchmiel/yzco1023/
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 found a plugin that is able to show current price line on highstock candlestick chart, but it only displays the latest data.
I have tried to find a way to display the horizontal price line when user hovers over the data.
I thought it might be related to tooltip event, but I have no idea how to do it.
Could someone give me a hint? Thanks,
tooltop:{
formatter: function () {
}
},
http://jsfiddle.net/RolandBanguiran/nf7ne/
There is a couple of ways to achieve that. Problem is a little missing description (do you want to display current price on hover, or actually hovered value?).
Anyway, the easiest way would be to enable crosshairs: demo.
Another way is to add/remove plotLine on mouseOver event for series.point, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.y
});
}
}
}
If you want to hide that line, use mouseOut event and simply remove plotLine like above.
Third option bases on the above one - in case you want to display current price instead of hovered one. In such case, change value for the plotLine, demo and code:
point: {
events: {
mouseOver: function() {
var chart = this.series.chart;
chart.yAxis[0].removePlotLine("tooltip-line");
chart.yAxis[0].addPlotLine({
width: 2,
color: "black",
id: "tooltip-line",
value: this.series.yData[this.series.yData.length - 1][0]
});
},
mouseOut: function() {
this.series.yAxis.removePlotLine("tooltip-line");
}
}
}
Extra tip:
Check out more option for plotLines in the API (like dash style, or label).
I have implemented a wicked-chart which shows 4 series in the legend. Now I want to handle the series click event in legend and update some values outside the wicked highchart.
To be specific, I want to implement exactly like this jsfiddle but in java wicked-chart.
plotOptions:
{
series: {
events: {
legendItemClick: function(event) {
//Do something here
return false;
}
}
I did search all the methods of PlotOptions class but could get something similar to highcharts legendItemClick event.
My solution was not to find alternative for legendItemClick in wicket-charts as they do not have one. Instead I did this:
In your page html, give id="chart". Doing this highcharts shall fix your id to "chartVar" instead of changing it at each run.
<div wicket:id="chart" id="chart"></div>
In your javascript, define your series click using .highcharts-legend-item as below.
var onSeriesClick = function() {
var that = this;
for (var i=0;i<chartVar.series.length;i++)
{
$(".highcharts-legend-item:contains(" + chartVar.series[i].name + ")").click(function(){
// your legend click logic goes here
});
}
}