I have a simple chart with rangeSelector and all buttons are working fine. Ideally, I would like to have a nice animation each time user hit the button and changes the time period. Currently it is not animating juts simply swaping the line.
How can I use animation when the button is clicked?
Here are the buttons with no animation:
rangeSelector: {
allButtonsEnabled: true,
inputEnabled: $('#container').width() > 480,
selected: 2
}
fiddle
Many thanks for your help
Unfortunately in the setExtremes() function, you cannot use animation like the initial.
Related
I want hide tooltip and crosshair when screen resize but when I call method
this.chart.tooltip.hide();
Only tooltip hide , I dont see any method help hide crosshair.
After some fiddling around I found out that this works (for a button):
$('button').click(function() {
chart.update({tooltip: {enabled: false}, xAxis: {crosshair: false}}, true);
})
This disables the tooltip, and at the same time disables crosshair.
Note that setting tooltip: {crosshairs: false} in the update function will not do anything. Ref: tooltip.crosshairs.
crosshairs: Mixed
Since 4.1, the crosshair definitions are moved to the Axis object in order for a better separation from the tooltip. See xAxis.crosshair.
Working example: http://jsfiddle.net/q04df7wy/12/
Highcharts paints the chart as the page loads. For example when a simple bar chart is loaded, columns are painted on progressively.
Is there a way to disable this? I just want to chart as it is. No movements. I tried to set animation to false. But it does not work.
Jake He
The initial animation is hidden under a different "animation" option:
plotOptions: {
series: {
animation: false
}
},
Here's a JSFiddle using that option: http://jsfiddle.net/troygizzi/3w7noceq/
It was based on this one: http://jsfiddle.net/highcharts/VqruM/
i found this example that allows to set double click zoom to true. I need to be able to zoom in a single click how can I do that in high charts.
DoubleClick zoom example here:
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/maps/demo/doubleclickzoomto/
mapNavigation: {
enabled: true,
enableDoubleClickZoomTo: true
},
Use mapZoom after click event. In click event you have access to values of clicked place on a map.
Note: You may need to create some if-else statement, to prevent clicks on legend, +/- buttons etc.
you can use zoomTo() , it'll zoom to a particular point wherever you have clicked
here is a fiddle
oneclickzoomTo()
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();
} );
Is this possible? I want the other slices in the pie chart to adjust to a full circle when one is disabled in the legend, rather than just making an empty slice..
If you change the behavior of the legendItemClick event handler you can remove the sector instead of hiding it.
pie: {
point: {
events: {
legendItemClick: function (eventArgs) {
this.remove(); // Remove the point
eventArgs.preventDefault(); // Prevent the default behavior
}
}
},
showInLegend: true
}
This will only get you half the way though. The problem is that you cannot get the point back since it will be removed from the legend as well.
A way to get around this would be to add a reset button that brings back the original data set with series.setData(). See this jsfiddle example.