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)
}
}
}
}
},
Related
There is a function called setExtremes() which has to be called on either X-Axis or Y-Axis. But I have a requirement where I need to call the chart.events.selection event programmatically.
Highcharts.chart('container', {
chart: {
events: {
selection: function (event) {
}
}
}
}
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 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
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/