I have this JSFiddle, where I can draw annotations and drag them around.
But, in case I draw a segment or arrow-segment and in case I try to drag them to the most left edge of the chart, they are changing it's position and are aligning vertically and parallelly to the left edge. The demo can be seen in this video.
I tested and concluded that the issue has nothing to do with the plugins which I am having in the code I posted. So I wonder if this is a highcharts bug or if this behavior can be fixed within the onDrag event?
H.wrap(H.Annotation.prototype, 'onDrag', function(proceed) {
var annotation = this;
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
//do something here?
});
It looks like a bug, I reported it on the Highcharts Github issue channel where you can follow this thread: https://github.com/highcharts/highcharts/issues/14944
Setting ordinal=false resolves the issue: https://jsfiddle.net/BlackLabel/cnosa15L/1/
Related
Please have a look at
www.jsbin.com/wigokojina/1/edit?html,css,js,output
I've added custom svg icons to the konva transformer, but the middle rotator icon is draggable even if i set draggable to false. The two other icons are fine and as expected, as far as dragging is concerned.
My questions are:
How do i disable the dragging for the rotator anchor, so that the icon doesnt move?
How do i disable all event handlers for an anchor, and add one click event? Ive tried shape.off('dragmove') etc. The only thing that helps is setting listening to false, but then im prevented from adding a new event listener. I want to disable all event handlers for the top right anchor, and add one onclick listener afterwards.
Is it possible to add the icons to the shape itself using fillPatternImage? Instead of adding the icon as a new shape like im doing. If its possible, please provide an example using the jsbin.
Thanks very much :-)
At the current moment konva#4.0.16 doesn't support fully customized Konva.Transformer. But you are making a good attempt.
How do i disable the dragging for the rotator anchor, so that the icon doesn't move at all?
You can reset the position in transform event (almost as you do it). But at the current moment, for performance reasons, inside transform events all anchors has "old" positions. So you see dragging of the icon from rotater anchor. To fix the issue we can force update a transformer:
circle.on('transform', function(){
transformer.update();
for (var button in buttons) {
var selector = button.replace('_', '-');
var shape = transformer.findOne('.' + selector);
var icon = transformer.findOne('.' + selector + '-icon');
icon.position(shape.position());
icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
layer.batchDraw();
}
});
How do I disable all event handlers for an anchor, and add one-click event
It can be something like this:
shape.listening(false);
icon.on('click', () => {
alert('delete');
});
Demo: https://jsbin.com/galetahara/4/edit?js,output
I would like to include a Highchart graphic in a reveal.js presentation. The chart integrates fine, but the chart animation (e.g. growing of bar charts) plays while the "slide" is not visible yet.
How can I force an animation "refresh" when the slide changes?
Thanks for your help!
One way is to simply create the chart again when you want the animation to start.
I'm not an expert on Reveal.js, but it looks like you have an event when a slide is changed which you could use to redraw your chart to animate it:
Reveal.addEventListener( 'slidechanged', function( event ) {
redrawChart();
} );
Our purpose: We are working on a function that avoids overlapping dataLabels by repositioning. Doing so we are facing problems when updating the dataLabel position by the show event. To illustrate our problem we included a simplified example with a function that repositions the first dataLabel of each visible series by 30px to the top (y-direction). The reposition-function is fired by the show event.
... function adjustLables(chart, visibleIndex) {
console.log('dataLabels');
for (var i = 0; i < visibleIndex.length; i++) {
var index = visibleIndex[i],
dataLabel = chart.series[index].points[0].dataLabel,
adjY = dataLabel.y - 30;
chart.series[index].points[0].dataLabel.attr({
y: adjY
});
console.log(chart.series[index].name, 'dataLabel.y:', dataLabel.y, ', adjY:', adjY, dataLabel);
};
console.log('\n');
}; ...
Our problem:
Although our function adjusts the dataLabel.y property by applying .attr({y: adjY}), the dataLabel object does not behave in the way we expected.
For example: (see fiddle and the following description)
The repositioning works only once for a series that is shown by clicking the legend item for the first time. If one decativates and activates the same series again our adjustment does not work any longer.
(e.g. Activate series2 in our fiddle and you will see that its first dataLabel is moved 30px to the top. However, deactivate / reactivate series2 and the dataLabel is no longer moved 30px to the top but appears at its standard position.)
For debugging this mysterious deactivate/activate behavior we logged some information to the console after .attr() is called: seriesName, dataLabel.y, adjY, dataLabel-object. Surprisingly, although the dataLabel.y and adjY values are the same the dataLabel object itself remains unaffected at its y-property.
Overall we are wondering whether the show event is the proper way to "update" the dataLabel positions. Any experience or suggestions are very welcome.
I think this is caused mainly by animations, disable it for debugging: http://jsfiddle.net/pbNfz/1/ - works better now.
Also, see this very similar question.
Does anyone know the setting in highcharts (I've looked through the API but I can't seem to find it - maybe looking in the wrong place?) where I can disable the chart's ability to resize when I click on a legend item?
http://api.highcharts.com/highcharts#legend
If there are two lines on the graph, and toggle off one of them on the legend, the graph resizes to show the one line full sized. I want to prevent this functionality.
There actually is a simple solution to this provided for by the API:
chart: {
ignoreHiddenSeries: false
}
I'm pretty sure this is the behavior you desire.
Like stated in the title, I got the problem when I click on some slice of pie. I call function, which displays hidden div with the second pie. It appears correctly, but then I cannot click on that first pie and even tooltips are not displaying. And the second pie is all black, but that is the lesser problem, I think... Thanks for advices in advance!
Here's your fiddle with my changes: jsFiddle.
To fix hover and click events on first chart, I've deleted position: relative of second container.
To fix issue with black colors, I moved colors declaration into Highcharts.Chart({...}). Otherwise, you'll re-rewrite Highchart colors while creating the second chart.