Sorry to not include a fiddle as the highchart chart is tied tight to my application. Earlier the mouse events were getting tracked over the legends as well as the legend labels . For some reason these labels does not take the events anymore, rather it goes to the container holding the charts.
Any inputs?
Also when i try to inspect the above highlighted legend label, the parent container is highlighted instead of the label itself. The above problem is seen for other labels out of the plot area as well.
You can use custom-events extension which allows to catch this event on legend item.
legend: {
itemEvents: {
mouseover:function(){
console.log(this);
}
}
},
Example: http://jsfiddle.net/Utx8g/413/
Related
I just need to know how to disable a single legend item programmatically on chart reload (disable means: legend is shown greyed out and its linked curve is hidden), as I need to reload a chart with some new data using some back and forward arrows, but still need to remember the user preference or the state of legend items (on/off)
You can just call hide on the series associated with that legend marker to hide the series/grey out the marker:
series.hide();
Thanks #xorspark that's really it, it's about controlling the series not legend.
It happened to work specifically with the appeared or inited events, not shown event as it seemed to be, like this:
series.events.on("inited", () => {
reactState ? series.show() : series.hide();
});
inited event even works better, as disabled legends will not show a glimpse of their color on the curve when using appeared.
For a Highchart bubble chart I've got a hook in the chart events for render such that it looks at the bubble and datalabel and that relocates the datalabel when an overlap with another label occurs. It also figures out the x,y of the bubble and datalabel and draws a leader line from the label to the bubble. That works pretty well except for the case when the legend item is clicked to filter the bubbles. When Highcharts moves stuff around in this case, the render event series data has the x,y values from BEFORE the move which goofs up where the lines are drawing to.
Optimally, I'd like like know when the chart is completed renderering after the legend filter changes, then I can run the same logic to avoid collisions. At the moment, the collision logic I have is getting the location values before the legend filter process has laid out the elements. When I debug and toggle on/off the legend filter I see the new location in the series point datalabels so it leads me to believe the new values are there after the legend filter layout does it's thing.
I have two graphs side-by-side (pie and line) and I'd like to be able to highlight a line in the line graph upon hovering a legend in the pie graph (without the legend toggling feature).
The mouse events doesn't seem to fire on the legend component.
There's the selectMode option for the legend, but that's not what I want since its toggling the
series in the pie chart.
I'm able to catch the legendselectchanged event and "undo" the toggling by setting selected option of the series to true again, but its not ideal and the animation still fires, was unable to disable it.
Any ideas or workarounds?
[ECharts v4] From what I know, legend component internally dispatches 'highlight' and 'downplay' actions, but you can subscribe to those events to.
chart.on('highlight', function (e) {
// e => {
// excludeSeriesId: ...
// name: ...
// seriesName: ...
// type: "highlight"
// }
});
// same for 'downplay'
I have a line chart with multiple data. Here is the sample of my chart.
Normally legend data are automatically show/hide if I click that legend on chart.
But after I adding a function in legend like this,
legend: {
position: 'right',
item: {
onclick: function (d) {
console.log("onclick", d);
show(d); //when I click legend show some data
}
}
},
I don't get automatically show/hide if I click that legend on chart. But its not important for me.
Instead of this, I want to show only clicking legend data in chart. if I click data1 legend, I want to show only data1 line in chart and hide another data2,data3 and data4 line in chart.
But, I don't have any idea how to do this. I'm very appreciate for any suggestion.
Now, I can solve my problem. Here is the code.
legend: {
position: 'right',
item: {
onclick: function (d) {
console.log("onclick", d); //data1
show(d); //when I click legend show some data
chart.hide();
chart.show(d);
}
}
},
First, I use chart.hide(). This function will hide all data on chart.
After that, I use chart.show(d) and it can show only data of user click because I add user clicking legend as an argument.
Note: show(d) is not related with chart.show(d). Just a function
that I create for my need.
For those of you stumbling across this like I did while looking for a way to focus on a single series from a legend click (I'm used to a double-click doing this), it seems c3 added the ability to use alt-click to focus on a single legend item. See the commit here. It turns out this works in billboard.js as well, which is a fork of c3.
I'm having an issue when I add flags dynamically to a Highcharts chart. The thing is that when I do so, the flags are not drawn on the chart until I do something that makes the chart refresh (for example, drag the mouse over some button with a tooltip).
I've noticed that this has something to do with the fact that I add the flags inside a point's click event.
point: {
events: {
'click': function() {}
}
}
I assume this is the case since when I add flags to the chart in other parts of the code they appear instantly.
What could be the reason of this behavior?