I am using highcharts where I need extra padding on my chart. When I use navigator and zoom in I the padding is lost - which is fine as I am zooming in. However when I zoom out using Navigator I don't get my padding back. Alternatively if I use the zoom button on chart I get the padding back (I would expect the same behaviour from navigator as well when I try to zoom out).
I've copied a sample chart form Highcharts Demo on jsFiddle http://jsfiddle.net/gajjargaurav/RULh9/5/ with Navigator and http://jsfiddle.net/gajjargaurav/RULh9/4/ with Zoom button
The padding I have set is as below for my sample,
xAxis: {
maxPadding: 0.22, //Prevent chart going off the screen on the right
minPadding: 0.22,
tickPosition: 'outside'
}
The question is, how I can get the navigator to behave like the zoom button does when I try to zoom out using navigator?
Unfortunately min/maxPadding works only for initial state. If you want to improve your range in that way, I advice to use afterSetExtremes event handler, and there setup new extremes( just increase that one you get).
Note: When setting new extremes in afterSetExtremes, will call another afterSetExtremes. Make sure. Make sure that you will not create infinite loop (add some flag checking if extremes are already improved, or not).
Related
Automatically legend title has style text-overflow: ellipsis;, but I need to show all text from legend title. So, I need to set text-overflow: clip;.
When user change window size, legend items overlapping each other or
move to outside of chart container.
You can reproduce it here: https://jsfiddle.net/6ybv9kjx/6/
For reproduce you should change window size, when chart initialized.
Also, legend items showing be a certain rule. If all text in legend item doesn't placed in one line with previous item, item move to next line. I need, that legend item can breaking words. Is it possible?
The useHtml is a know problem.
For now if you don't really need it just disable it.
Fiddle
You can solve this issue by redrawing the chart whenever the browser window is resized. That way, the legend elements will be rendered based on the new width of the window.
Assign your chart options to a variable, which you'll then call each time the window is resized.
var thisChartOptions = {
/* your options go here */
};
/* draw chart when the browser window is loaded or resized
(see https://stackoverflow.com/a/1974797/2596103) */
$(window).on('resize', function() {
Highcharts.chart('container', thisChartOptions);
}).resize();
You can see this working in this fiddle: https://jsfiddle.net/brightmatrix/6ybv9kjx/43/
I tried using the legend.update() function (see https://api.highcharts.com/class-reference/Highcharts.Legend#update), but the legend items would overlap each other when the window was made smaller.
I have four HighCharts on a page, stacked vertically. In each of these charts I have buttons that change the data range and re-load the chart.
This works fine for the top two, but when the chart re-loads on the bottom two it moves the screen up the page, always to the same point.
With some testing I found that it doesn't matter what order the charts are in, and also if you click the button on the top form and scroll down the page, it moves the page back up to the same position.
It's like HighCharts has a lower limit on where the page an be and always moves it back to this position when a chart is loaded.
I can't find any settings within HighCharts or anything on Google that will sort this.
I thank you all in advance for your help
Paul
It's because chart container height for a moment gets smaller on chart reload. You can fix this by setting fixed container height.
I want to disable zoom from my HighStock chart navigator's. I mean, don't allow the user to resize the selector in the navigator, just drag it.
I have tried settings axisX min and max but it only set the initial values. I also found xAxis#minRange but there is not an option like xAxis#maxRange so I can set min and max range to the same value to avoid zooming.
Is this possible?
You have to set the zoomType: 'none', property.
I'm experiencing really strange behavior.
If I resize the timespan selection in the Navigator, I can scroll the selection left and right as many times as I want.
But is i sekect area directly in the chart, it zooms in to the selection, but afterwards if I try to scroll the selection in Navigator, the selection jumps to the right side of Navigator and stays there.
Any ideas what may be the difference between resizing with these two approaches? Are there any specific events trigerred after resizing in the chart vs in Navigator?
I would like to animate the highstock chart as the scrollbar is being moved and to animate the update of the chart when a handle on the scrollbar is dragged and then released ( see google finance chart). I have tried setting the animation on both the chart object as well as the plot->series->animation . The chart animates as it loads but doesn't when the scrollbar is updated ( it just gives a jarring update ).
Does this functionality currently exist, or is it in the works for the high stock library?
Unfortunately this option is not possible, but you can suggest it in our uservoice system available here: http://highcharts.uservoice.com/