I just started using Highcharts and I need to capture an event when the user hovers over a slice of the pie and also to get contextual information about that slice. Is there an event for that? I haven't been able to find one in the documentation.
plotOptions.series allows events.mouseOver and events.mouseOut handlers to be added, a la:
$('#container').highcharts({
...
plotOptions: {
series: {
point: {
events: {
mouseOver: function () {
$reporting.html('x: ' + this.x + ', y: ' + this.y);
}
}
},
events: {
mouseOut: function () {
$reporting.empty();
}
}
}
},
...
});
Demo
Related
i tried to add click event to sankey diagram node.
I found link click event is possible, but not node click event.
is it possible to add click event to node?
In this example you can see how there is a click on point event added to the chart plotOptions, this is one way to add a click to a point.
https://api.highcharts.com/highcharts/series.sankey.point.events
plotOptions: {
series: {
point: {
events: {
click: function() {
let point = this;
console.log('click point', point, 'from', point.from, 'to', point.to);
}
},
}
}
},
Another way is a click on point linked using its id.
https://api.highcharts.com/highcharts/series.sankey.nodes
nodes: [{
id: 'Brazil',
}, {
id: 'Portugal',
events: {
click() {
let series = this.series,
nodes = series.nodeLookup;
console.log('click event on node linked by id ', nodes);
}
}
}],
Demo: https://jsfiddle.net/BlackLabel/jw8skp1z/
I'm using Vue apexcharts and whenever I click on a Pie chart I have this:
options: {
chart: {
events: {
click:
(event: any, chartContext: any, config: any) => {
console.log('Clicked', chartContext);
console.log('Event', event);
console.log('Config', config);
}
},
},
In the console, config.seriesIndex and config.dataPointIndex are always -1 - How do I get the value of the pie slice I clicked on? Index/label/whatever??
To get a reference to a pie slice clicked on you'll want to use the dataPointSelection function instead. This allows you to get the config.seriesIndex and config.dataPointIndex in the way which you've tried.
options: {
chart: {
events: {
dataPointSelection:
(event, chartContext, config) => {
console.log('seriesIndex', config.seriesIndex);
console.log('dataPointIndex', config.dataPointIndex);
}
},
},
},
The click function fires when a user clicks anywhere on the chart and is not intended to be used to extract data about user interaction with specific data points.
I try to draw some lines (paths) into a Highcharts-Chart. When exporting the chart, the lines should be a little different. Therefore I created a Highcharts-Function, which I call on »load« and »redraw«. I just need to pass one little argument when calling the function, but this doesn´t work. How can I pass the argument?
Here´s the relevant code detail:
Highcharts.linien = function (r) { //generating the lines with my r-argument }
...
chart: {
events: {
load: Highcharts.linien(0)
}
exporting: {
chartOptions: {
chart: {
events: {
load: Highcharts.linien(15)
}
}
}
And here´s a working jsFiddle without using the argument.
Besides: If anyone has a clue, how to destroy my svg-group (linienGruppe) on »redraw«, I would also be very grateful!
There should be:
chart: {
events: {
load: function(){
Highcharts.linien.call(this, 0);
}
}
}
exporting: {
chartOptions: {
chart: {
events: {
load: function(){
Highcharts.linien.call(this, 15);
}
}
}
}
}
So, using call() you can pass on this object to your function.
And regarding destroying group, first store somewhere your group, so later you can destroy that object, like this:
if(this.linienGruppe) {
this.linienGruppe.destroy();
}
this.linienGruppe = linienGruppe;
And working demo: http://jsfiddle.net/t3ywb3gq/4/
Highcharts.linien(0) & Highcharts.linien(15) are both function executions/invocations and not handlers. A handler is a function itself. Since you want to pass a parameter, I suggest you create an inline anonymous function with one line that calls your created method with appropriate arguments like below;
chart: {
events: {
load: function(){
Highcharts.linien(0);
}
}
exporting: {
chartOptions: {
chart: {
events: {
load: function(){
Highcharts.linien(15);
}
}
}
}
updated jsFiddle
I am trying to capture click event on a nvd3 stacked area chart. I am able to capture tooltip show tooltip hide events. I want to capture click event and get the clicked point info. Please help. PLUNKER_LINK
my chart option is :
chart: {
type: 'stackedAreaChart',
height: 450,
x: function (d) { return d[0]; },
y: function (d) { return d[1]; },
showValues: true,
valueFormat: function (d) { return d3.format(',.4f')(d); },
dispatch: {
tooltipShow: function (e) { console.log('! tooltip SHOW !') },
tooltipHide: function (e) { console.log('! tooltip HIDE !') },
beforeUpdate: function (e) { console.log('! before UPDATE !') },
elementClick: function (e) { alert('clicked');}
}
}
};
You need to wrap the dispatch block in a stacked block:
stacked: {
dispatch: {
tooltipShow: function (e) { console.log('! tooltip SHOW !') },
tooltipHide: function (e) { console.log('! tooltip HIDE !') },
beforeUpdate: function (e) { console.log('! before UPDATE !') },
elementClick: function (e) { alert('clicked');}
}
}
But by doing so you still won't be able to receive elementClick, because stacked chart layer just won't send it. Instead you can receive the areaClick event, but it only gets trigged when you click inside the stacked area.
Therefore I would recommend you intercept dispatch events from the "interactive" layer. Just do it like this:
chart: {
type: 'stackedAreaChart',
...
interactiveLayer: {
dispatch: {
elementMousemove: function(e) {
console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
},
elementClick: function(e) {
console.log(e.mouseX + " " + e.mouseY + " " + e.pointXValue);
}
}
}
}
I'm using Highcharts to display a chart and I'm using Highslide to display additional information in a pop-up when the user clicks on a point in the chart. However, I want to add additional information to the title/heading-text in the pop-up.
I've gotten Highslide to work in displaying basic information using the following code:
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
}
credits: {
enabled: false
}
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
hs.htmlExpand(null, {
pageOrigin: {
x: this.pageX,
y: this.pageY
},
headingText: this.series.name,
maincontentText: Highcharts.dateFormat('%A, %b %e, %Y', this.x) +':<br/> '+
this.y +' visits',
width: 200
});
}
}
},
marker: {
lineWidth: 1
}
}
},
series: []
}
});
I've read through the API for Highslide and saw that you could use the 'heading' variable with the 'Expander.prototype.onAfterGetHeading' function, which I've displayed below, but I'm not sure how to implement it with Highcharts.
hs.Expander.prototype.onAfterGetHeading = function () {
this.heading.html = 'this.a.title';
}
HERE's a site that displays a pop-up with a multi-line title in a Highslide pop-up, as an example. However, keep in mind that I'm trying to implement this in Highcharts, possibly with dynamic text in the title.
Thanks.
Here’s a solution you can use with Highcharts: http://jsfiddle.net/roadrash/gd3xz/
Please note that this is the correct code to insert the anchor's title text in the heading, as an additional heading text:
hs.Expander.prototype.onAfterGetHeading = function (sender) {
if (sender.heading) {
sender.heading.innerHTML += this.a.title;
}
};
I’m not familiar with Highcharts, but I don’t think you can use this.a.title since a refers to the anchor tag. You can of course insert something else than this.a.title with the above code, as I've done in my demo.