While selecting a range for zooming a Highcharts chart, I'd like to be able to display a tooltip showing the limits of the selected range (min/max x for zoomType x; min/max x and y for zoomType xy).
Is this possible and how would I go about implementing it? Is there for example an event that is fired repeatedly while selection is in progress?
You can catch setExtremes() function and implement your custom tooltip (i.e as a div)
http://api.highcharts.com/highstock#xAxis.events.setExtremes
Related
We are building an iOS app using HighCharts components. Defined HIColumn for Bar Chart in XAxis with couple of HISpline (AreaChart) overlay on yAxis that can be toggled. When a user is zoomed in to a specific xAxis period, upon adding the spline, the Chart looses the Zoom and redraw itself. Is it possible to add a spline at runtime without loosing the zoom? These are the things I tried:
Set Min/Max on XAxis. How can we get the current Min/Max/tickInterval when the user zoom in on the xAxis.
Instead of dynamically adding the spline, tried making it visible true/false but still the chart refresh and lose the zoom.
Any help is appreciated.
Thanks!
Considering this official demo. When my mouse moves to somewhere on x axis, a point in one of four series becomes highlight.
How to highlight points in same x value for all series when mouse move?
If I understand correctly, you need the "shared" option in the tooltip, i.e.,
tooltip: { shared: true }
Example
http://jsfiddle.net/bv05y6Lg/
I am using highcharts library to draw chart and I need to display Weekdays as labels on x-axis and also to auto reset it like from Monday to M if all weekdays can't fit on screen.
It should be dynamic, which means no flickering should appear when changing label text on x-axis.
Any suggestions?
Thanks in advance.
There is no straight option for that, rather simple workaround:
Disable reflow from Highcharts, use window.resize browser event
In that event add condition to decide showing full name of just shortened, and set this for chart - chart.xAxis[0].dateTimeLabelFormats should be fine
After setting new format, apply new chart dimensions using chart.setSize(w, h)
Is it possible to reset the choosen xy zoomvalue after klickin on a rangeSelector (e.g. 1y), because the chart looks distorted when I am switching from xy zoomvalue to a specific range.
Cheers
This is how Highstock works, see this thread.
What come cross my mind is to disable range selector and use your own button which will reset extremes (via setExtremes()).
I have a chart that has a custom legend i.e. it isn't part of Highcharts at all, it's completely my own code, the Highcharts legend is disabled for this chart.
Is it possible to turn series data AND plot bands on/off in a Highcharts chart using the API?
I found an example that triggered the click event of a legend item to do this, but this obviously relies on a legend being present, so this is no use to me: http://birdchan.com/home/2013/01/23/trigger-a-click-event-on-a-legend-item-in-highchart/
I also tried to set the series data .visible property to false and then redraw the chart and although it sets the visible property just fine, it doesn't redraw the chart so nothing changes:
var chart = new Highcharts.Chart(myoptions);
$("#custom_legend_link").click(function (e) {
chart.series[0].visible = !chart.series[0].visible;
chart.redraw();
}
Here is a jsFiddle using the basic line demo showing my problem:
http://jsfiddle.net/gfyans/zsaV4/
Thanks,
Greg.
To toggle the series, use Series.setVisible(). When called without parameters, it toggles.
Plot bands are a bit different, since they don't have methods like hide(), show() or setVisible. To toggle a plot band, you need to remove it by Axis.removePlotBand() and add a new one with the same options by Axis.addPlotBand().