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?
Related
I form charts and a have such series format:
series: {
id : '001',
name: 'name,
data: [],
color: '#fff'
}
In plotOptions I created onClick event:
plotOptions: {
series: {
stacking: 'normal',
cursor: 'pointer',
allowPointSelect: true,
marker: {
states: {
select: {
enabled: true
}
}
},
point: {
events: {
click: function () {
console.log('!!!!!', this);
}
}
}
}
}
After clock i get object in log. There is all information except id: '001'. How can I get it?
You attached the click event to the point, so this inside the callback refer to the point object. Id is defined in series' options.
You can access it from series.options object:
point: {
events: {
click: function() {
console.log('!!!!!', this.series.options.id);
}
}
}
live example: http://jsfiddle.net/4s3ayhfy/
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/
I have a problem with click events on heatmaps: it works only if you click on a tooltip, but not on the chart itself. See the demo http://jsfiddle.net/3UWaA/1/
chart: {
type: 'heatmap',
events: {
click: function(event) {
alert("clicked!");
}
}
}
Any suggestions how to fix this?
Thanks
Add the events into a plotOptions object.
Like this:
plotOptions: {
series: {
events: {
click: function (event) {
alert('event!');
}
}
}
},
Demo: http://jsfiddle.net/robschmuecker/3UWaA/3/
Because click event on chart, works in the plotArea, not on the serie. Heatmap serie overlap plotArea, so click event doesnt work. You need to catch plotOptions event on serie / point.
Try inserting the EVENTS: under series block and disable the tooltip as below:
series:
[
{ name: 'Passed',
borderWidth: '1',
borderColor: '#000000',
cursor: 'pointer',
events:
{
click: function ()
{
alert('wow');
}
},
color:'green',
data: [[0, 1, ''],[0, 2, ''],[0, 3, '']],
dataLabels:
{
enabled: 'true',
color: '#000000'
}
}
]
So when you click the chart itself,click event will work fine.
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)
}
}