I need to attach a click event to the column chart crosshair, and have found the black label "customEvents.js" module:
https://github.com/blacklabel/custom_events
As a beginner I just can't seem to figure out how to get this working. I would be grateful if someone could modify the demo fiddle to show me how it's done! I've tried placing the "crosshair" tag inside "plotOptions", inside "xAxis", and on its own, but without success.
https://jsfiddle.net/BlackLabel/Utx8g/
crosshair: {
enabled: true,
events: {
dblclick: function () {
$('#report').html('dbclick on xAxis label');
},
click: function () {
$('#report').html('click on xAxis label');
},
contextmenu: function () {
$('#report').html('context menu on xAxis label');
}
}
}
The issue looks like a regression, so I reported it on the plugin github: https://github.com/blacklabel/custom_events/issues/133
As a workaround, you can add pointerEvents: 'auto' style.
(function(H) {
H.wrap(H.Axis.prototype, 'drawCrosshair', function(proceed) {
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (this.cross) {
this.cross.css({
pointerEvents: 'auto'
});
}
});
})(Highcharts);
Live demo: http://jsfiddle.net/BlackLabel/pfkmg39x/
Docs: https://www.highcharts.com/docs/extending-highcharts
Related
I have a chart with multiple data series. How do I change it so that when I click on the legend it hides all other data points and only shows the data series I clicked on?
Many thanks
Return false from the legendItemClick event callback function to prevent the default legend behaviour and use hide and show methods on the relevant series.
plotOptions: {
series: {
events: {
legendItemClick: function() {
this.chart.series.forEach(s => {
s !== this ? s.hide() : s.show()
}, this);
return false;
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/tzLbxr20/
API Reference:
https://api.highcharts.com/highcharts/plotOptions.series.events.legendItemClick
https://api.highcharts.com/class-reference/Highcharts.Series#show
https://api.highcharts.com/class-reference/Highcharts.Series#hide
I am working on an app where I need to show drilldown chart. I am using highcharts for this, I want to fire the click event when user clicks on the bars of second chart (drilled one).
I am using code but this is firing the event on the first chart also. Is there a way to fire it on the second chart only? or check if event is raised from which chart?
plotOptions: {
series: {
events:{
click: function (event) {
console.log(event);
alert("testing" + event.point.name)
}
}
}
}
Sample is here - https://highcharts-angular-drilldown-zqmyd9.stackblitz.io/
Try to define your chart as a global variable and add the condition to check if the chart.drilldownUpButton exists into your click callback.
Demo: https://jsfiddle.net/BlackLabel/uhbored9/
plotOptions: {
series: {
events: {
click: function(event) {
if (chart.drillUpButton) {
alert("testing" + event.point.name)
}
}
}
}
},
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");
}
}
}
}
},
});
});
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/