Highcharts upgraded their library to version 3. But in this version I can't capture the mouse's right click like before:
chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container-chart-1',
zoomType: 'xy'
},
(...),
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function(e) {
alert('LEFT CLICK YEAH!');
},
contextmenu: function (e) {
alert('RIGHT CLICK NOT SO YEAH!');
}
}
}
}
}, (...)
I'm still on version 2 since I cannot make it to work.
Ideas and thoughts would be much appreciated?
It's interesting, I was sure that setting context menu in that way doesn't work since 1-2years. Now, possible way is to add custom events using Element.on(), for example:
for(var j in chart.series){
var series = chart.series[j];
for(var i in series.data){
(function(i){
var point = series.data[i];
if(point.graphic){
point.graphic.on('contextmenu', function(e){
// show your context menu
});
}
})(i)
}
}
Related
I have a highchart in my app. This is part of the chart_options:
plotOptions: {
column: {
pointWidth: 20
},
series: {
cursor: 'pointer',
events: {
click: function (event) {
//debugger;
}
}
}
}
Please check the line on which the debuggers is. Previously I hade there: event.point.pageY and I got the exact position of closest point of the click event.
After I updated my Highcharts version, event.point.pageY is undefined. How do I get this value?
I'd like the cursor to be a crosshair when it is over the chart area of a highcharts graph, to indicate to users that they can zoom in. However, I don't want the cursor to be a crosshair when it's over other areas such as the legend or axes.
Is this possible?
You can use built-in method chart.isInsidePlot(plotX, plotY). Example: http://jsfiddle.net/2eje4xxb/1/
Code example:
container.on("mousemove", function (event) {
var chart = container.highcharts();
if (chart.isInsidePlot(event.pageX - chart.plotLeft, event.pageY - chart.plotTop)) {
$("body").css({
cursor: "crosshair"
});
} else {
$("body").css({
cursor: "default"
});
}
});
Another idea is to utilize chart.plotBackgroundColor option, which creates rect, which can obtain CSS styles:
chart: {
zoomType: 'x',
plotBackgroundColor: "rgba(10,0,0,0)", // dummy color, to create an element
events: {
load: function(){
if(this.plotBackground) {
this.plotBackground.toFront().css({ // move on top to get all events
cursor: "crosshair"
});
}
}
}
},
And demo: http://jsfiddle.net/2eje4xxb/2/
Yes it is possible. You can write code to set the cursor style in the mouse events.
Please find the jsfiddle here - http://jsfiddle.net/3Lu7bzmn/5/
CSS
.cursorCrossHair{
cursor : crosshair
}
.cursorDefault{
cursor : default
}
JS - Shown only specific piece of code which is required to change the cursor. The id of the div used to render the highcharts is called "container". Please refer the jsfiddle to see the full working example.
$('#container').highcharts({
chart: {
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$("#container").removeClass("cursorDefault").addClass("cursorCrossHair");
},
mouseOut: function () {
$("#container").removeClass("cursorCrossHair").addClass("cursorDefault");
}
}
}
}
},
});
});
How to determine the coordinates of the point where the CLICK was made. If the CLICK was made exactly on the line of the graphic (not on the point of the graphic).
chart: {
events: {
click: function(event) {}
}
},
Not work
I think you should use plotOptions.series.events.click, not chart.events.click. Then simply set tooltip.snap = 1 to get clicks only when cursor is really close to the line/point. To get coordinates use event.chartX and event.chartY:
tooltip: {
snap: 1
},
plotOptions: {
series: {
events: {
click: function (e) {
console.log(e.chartX, e.chartY);
}
},
}
},
Demo: http://jsfiddle.net/dxj7wemh/
How do I disable click on a datalabel in a PIE?
In previous version 2.3.2 click on a datalabel doesn't have any action on the pie. How do I get that in version 3.0.4?
There is no strict way to get that behavior back, probably there were requests from users to make this work that way. However, you can disable this by overwriting 'click' event on dataLabels:
chart: {
events: {
load: function () {
var chart = this,
points = chart.series[0].data,
pLen = points.length;
for (var i = 0; i < pLen; i++) {
points[i].dataLabel.on('click', function (e) {
e.stopPropagation();
});
}
}
}
},
Working jsfiddle.
legendItemClick: function() {
return false;
}
set useHTML to false
$("#container").highcharts({
legend: {
useHTML: false
}
});
I am implementing an animated pie chart in Highcharts where the slices pull out on mouseover and all is good apart from a issue where the on mouseOut I want the slice to return to the 'closed' position.
This is the code for the animation and I have a clearTimeout on mouseOut however this is not returning the slice to the original position.
Is there an easy way of the chart to its original position.
I have a fiddle here...
http://jsfiddle.net/rupertito/Y3wvN/1/
pie: {
allowPointSelect: true,
stickyTracking: false,
point: {
events: {
legendItemClick: function() {
return false;
},
mouseOver: function(event) {
var point = this;
if (!point.selected) {
timeout = setTimeout(function () {
point.firePointEvent('click');
sectors.tooltip.refresh(point);
}, 20);
}
}
}
},
events: {
mouseOut: function() {
clearTimeout(timeout);
},
},
Hope this all makes sense and thanks for any help in advance.
Cheers
Rob
This is bug reported here. It's about not working slice for point. There is also workaround how avoid that issue. And simple example for you with mouseOver/mouseOut: http://jsfiddle.net/GqfU4/8/
function setTranslation(p, slice){
p.sliced = slice;
if(p.sliced){
p.graphic.animate(p.slicedTranslation);
} else {
p.graphic.animate({
translateX: 0,
translateY: 0
});
}
}
And for a pie:
point: {
events: {
mouseOut: function () {
setTranslation(this, false);
},
mouseOver: function() {
setTranslation(this, true);
}
}
},