I'm building a graph using Highcharts-3d v.4.1.4 and a click does not work - plotOptions.scatter.point.events.click. I use IE8.0.7601.17514 and jQuery 1.11.0. Chart works perfectly fine in chrome and ie11.
As example I take this:
plotOptions: {
scatter: {
width: 10,
height: 10,
depth: 10,
point:{
events:{
click: function(event){
alert('hello');
}
}
}
}
},
The problem is related with general issue in IE8/9 with click event.
Related topic: https://github.com/highslide-software/highcharts.com/issues/4045
I did so:
chart = new Highcharts.Chart({
chart: {
renderTo: 'first_graph',
type: 'scatter',
backgroundColor: '#fdfdfd',
height:800,
events:{
click: function(event){
if (this.hoverPoint!=null){
alert('Hi!');
}
}
}
Related
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)
}
}
I need to disable the hover attribute of legend items because I am using Highcharts on mobile platforms. Sadly, making a legendItemClick event does not solve the problem as hovering still occurs.
I was encouraged to see that this issue came up on the old support site for highcharts back in 2011. The thread can be found here. I was particularly glad to see the last jfiddle example and the function declared in it.
Unfortunately, the only thing that worked for me was the workaround of changing the setHoverStyle to null. This isn't great though since the hover action still fires and makes navigating the legend and chart unresponsive. The rest of the suggestions in the above thread resulted in the chart not being rendered.
Granted, it might be because I had a difficult time translating the example to my purposes - honestly, I do not know where to call the function and everywhere I have tried has failed. My JavaScript file is set up along the lines of
var chartDefinition = {
chart: {
renderTo: 'chart_content',
type: 'column'
},
colors: [
'#619ED6',
'#6BA547',
'#F7D027',
'#E48F1B',
'#B77EA3',
'#E64345',
'#60CEED',
'#9CF168',
'#F7EA4A',
'#FBC543',
'#FFC9ED',
'#E6696E'
],
title: {
text: ''
},
...
column: {
shadow: false,
borderWidth: 1,
events: {
click: function() { return false; },
legendItemClick: function() { return false; }
},
dataLabels: {
enabled: false,
color: '#222',
style: {
fontFamily: 'sans-serif',
fontSize: '13px',
fontWeight: 'bold'
}
}
}
},
series: []
};
Listing and setting the various highcharts attributes.
Does anyone know how to disable this hover attribute or where the proper place would be to call the function?
There are a few solutions to implement this. There's no built-in option to change that (as of 06.2022).
Try to disable mouseover for legendGroup, not legendItem.
Demo: http://jsfiddle.net/Cp7xh/10/
Disable pointer-events in CSS:
.highcharts-legend {
pointer-events: none;
}
Demo: http://jsfiddle.net/BlackLabel/ebrodhk4/
A plugin that prevents Highcharts Core from adding events:
Plugin:
(function(H) {
H.wrap(
H.Legend.prototype,
'init',
function(proceed, chart, options) {
if (options.enableMouseTracking === false) {
this.setItemEvents = false;
}
proceed.apply(this, [chart, options]);
}
);
})(Highcharts);
Usage:
legend: {
enableMouseTracking: false,
itemStyle: {
cursor: 'auto'
}
},
Demo: https://jsfiddle.net/BlackLabel/ogqv2sya/
Is it possible to plot a line on click event of the chart?
Chart Click Event
chart: {
events: {
click: function(event) {
alert ('x: '+ event.xAxis[0].value +', y: '+
event.chartY );
var chart = event.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: event.chartX,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}
}
},
I had initially done the same on the plotoptions click event of highcharts. Now, doing the same using chart click event? but not able to get the series xaxis object.
Worked! Had to read the highcharts document... :-)
Working LINK
chart: {
events: {
click: function (event) {
var chart = this.xAxis[0];
chart.removePlotLine('plot-line-1');
chart.addPlotLine({
value: event.xAxis[0].value,
color: '#FF0000',
width: 2,
id: 'plot-line-1'
});
}
}
I am building a Dashboard and it has around 4 graphs on a row and on click of any graph i want to update another graph which is bigger in size to display the graph so that its visible to the user to analyze.
any idea how to Redraw the map on click on a button.
I did the similar thing on my project.
You can add one button zoom/popup, clicking on which would open a new big chart and disable the exporting buttons in this new chart.
Here's the full code.
function callback($this) {
var img = $this.renderer.image('images/zoom_icon.png', $this.chartWidth - 40, 5, 40, 12);
img.add();
img.css({
'cursor': 'pointer'
});
img.attr({
'title': 'Pop out chart'
});
img.on('click', function () {
var params = {
chart: {
spacingLeft: 100,
spacingRight: 100,
renderTo: 'myChart'
},
title: {
text: 'title'
},
exporting: {
buttons: {
exportButton: {
enabled: false
},
printButton: {
enabled: false
}
}
}
}
new Highcharts.Chart(params, function (chart) {});
})
}
new Highcharts.Chart(charts.params, callback);
// where charts.params is object which contains options for chart