When I call series[0].remove() in a while loop, the shadow of the cursor is never cleaned.
The code is called on a area-stacked click.
plotOptions: {
area: {
stacking: 'percent',
trackByArea: true,
events: {
click: function () {
var chart = $('#container').highcharts();
while(chart.series[0]) {
chart.series[0].remove();
}
}
}
}
}
JSFiddle : http://jsfiddle.net/4sV5g/
Any idea on how to avoid that ?
Found the solution here : https://stackoverflow.com/a/18659064/1456184
for(var i = chart.series.length - 1; i > -1; i--) {
if(chart.series[i].name !== 'Navigator') {
chart.series[i].remove(false);
}
}
Using remove(false) and then a redraw() will not have artifacts.
And I'm not removing the navigator series so there is no bug there too.
I should probably update it like in this fiddle : http://jsfiddle.net/engemasa/WcLQc/
Related
plotOptions: {
series: {
events: {
afterAnimate: function () {
for (let item of this.chart.legend.allItems) {
item.legendItem.on('mouseover', function (e) {
/**
* Register a callback based on the legend selected
*/
}).on('mouseout', function (e) {
/**
* Degerister a callback
})
}
}
},
I wish to add functionality when I mouseover the legend item but the above removes the default transparency functionality. How can I easily re-invoke?
You can add a part of default code for the events functions:
plotOptions: {
series: {
events: {
afterAnimate: function() {
const legend = this.chart.legend,
boxWrapper = legend.chart.renderer.boxWrapper;
for (let item of legend.allItems) {
let isPoint = item instanceof Highcharts.Point,
activeClass = 'highcharts-legend-' +
(isPoint ? 'point' : 'series') + '-active';
item.legendItem.on('mouseover', function(e) {
if (item.visible) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('inactive', !isPoint);
}
});
}
item.setState('hover');
if (item.visible) {
boxWrapper.addClass(activeClass);
}
}).on('mouseout', function(e) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('', !isPoint);
}
});
boxWrapper.removeClass(activeClass);
item.setState();
})
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5000/
I am using highchart contextmenu (using: https://blacklabel.github.io/custom_events/js/customEvents.js) and drill down and drill up.
Problem:
When I right click on pie chart we are able to call alert which is in contextmenu. At the same time, when I drill down and drill up then right click on pie chart, contextmenu is not working. In plotoption it's working fine but I do not need it in plotoption.
Code:
chart: {
type: 'pie',
events: {
drillup: function () {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
console.log('drillup',chart.series[0].events);
if (!chart.plotOptions){
chart.plotOptions = {};
}
if (!chart.plotOptions.series) {
chart.plotOptions.series = {};
}
if (!chart.plotOptions.series.events) {
chart.plotOptions.series['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
/*
plotOptions: {
series: {
events: {
contextmenu: function () {
alert('hi33')
}
},
}
},
*/
console.log('drillup222',chart);
}, 100);
},
drilldown: function (e) {
var chart = this;
window['chart'] = chart;
setTimeout(function () {
if (!chart.series[0].events) {
chart.series[0]['events'] = {
contextmenu: function () {
alert('hi33')
}
}
}
console.log('drilldown',chart.series[0]);
}, 100);
}
}
},
https://jsfiddle.net/k14ajzpo/2/
https://jsfiddle.net/0txqk2cn/1/
The workaround for this issue is to add an event to plotOptions and check if event occurred on main series. Check demo and code posted below.
Code:
chart: {
type: 'pie',
events: {
load: function () {
var chart = this;
chart.series[0].customEventsEnabled = true;
}
}
},
plotOptions: {
series: {
events: {
contextmenu: function() {
var series = this;
if (series.customEventsEnabled || series.drilldownLevel) {
console.log('working');
}
}
}
}
}
Demo:
https://jsfiddle.net/BlackLabel/0pLqvmky/
How do I disable click on a datalabel in a PIE?
In previous version 2.3.2 click on a datalabel doesn't have any action on the pie. How do I get that in version 3.0.4?
There is no strict way to get that behavior back, probably there were requests from users to make this work that way. However, you can disable this by overwriting 'click' event on dataLabels:
chart: {
events: {
load: function () {
var chart = this,
points = chart.series[0].data,
pLen = points.length;
for (var i = 0; i < pLen; i++) {
points[i].dataLabel.on('click', function (e) {
e.stopPropagation();
});
}
}
}
},
Working jsfiddle.
legendItemClick: function() {
return false;
}
set useHTML to false
$("#container").highcharts({
legend: {
useHTML: false
}
});
I am implementing an animated pie chart in Highcharts where the slices pull out on mouseover and all is good apart from a issue where the on mouseOut I want the slice to return to the 'closed' position.
This is the code for the animation and I have a clearTimeout on mouseOut however this is not returning the slice to the original position.
Is there an easy way of the chart to its original position.
I have a fiddle here...
http://jsfiddle.net/rupertito/Y3wvN/1/
pie: {
allowPointSelect: true,
stickyTracking: false,
point: {
events: {
legendItemClick: function() {
return false;
},
mouseOver: function(event) {
var point = this;
if (!point.selected) {
timeout = setTimeout(function () {
point.firePointEvent('click');
sectors.tooltip.refresh(point);
}, 20);
}
}
}
},
events: {
mouseOut: function() {
clearTimeout(timeout);
},
},
Hope this all makes sense and thanks for any help in advance.
Cheers
Rob
This is bug reported here. It's about not working slice for point. There is also workaround how avoid that issue. And simple example for you with mouseOver/mouseOut: http://jsfiddle.net/GqfU4/8/
function setTranslation(p, slice){
p.sliced = slice;
if(p.sliced){
p.graphic.animate(p.slicedTranslation);
} else {
p.graphic.animate({
translateX: 0,
translateY: 0
});
}
}
And for a pie:
point: {
events: {
mouseOut: function () {
setTranslation(this, false);
},
mouseOver: function() {
setTranslation(this, true);
}
}
},
using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?
I tried :
plotOptions: {
series: {
states: {
select: {
lineWidth: 2,
zIndex:10
}
},
with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.
Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:
Highcharts.Series.prototype.setState = (function (func) {
return function () {
if (arguments.length>0){
if (arguments[0] !== ''){
if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
this.options.oldZIndex = this.group.zIndex;
this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
}
}else{
if (typeof this.options['oldZIndex'] !== "undefined"){
this.group.zIndex = this.options['oldZIndex'];
}
}
var order = [], i = 0;
$.each(this.chart.series, function(){
order.push({id:i,zIndex:this.group.zIndex,me:this});
i++;
});
order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
$.each(order, function(){
this.me.group.toFront();
});
func.apply(this, arguments);
}
};
} (Highcharts.Series.prototype.setState));
And here's the JSFiddle demonstrating:
http://jsfiddle.net/G9d9H/9/
Let me know if that's what you needed.
I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)
plotOptions: {
series: {
events: {
click: function () {
this.group.toFront();//bring series to front when hovered over
}
}
}
}