I want to have an effect like this when I hover over or select a country
hover effect
Ignore the tooltip present here
You can add this functionality in your point.mouseOver and point.mouseOut events callback functions.
You can use point.graphic.shadow() for adding shadow to your point and then remove this shadow manually on mouseOut.
Here you can see code that may help you:
point: {
events: {
mouseOver: function() {
this.graphic.shadow({
width: 10
})
},
mouseOut: function() {
Highcharts.each(this.graphic.shadows, function(p) {
p.remove();
})
}
}
}
And here you can find live example how it can work: http://jsfiddle.net/x4j0d6dy/1/
Regards,
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
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;
};
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/
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
});
}
}