I have a basic two axis line chart, with one series. Its data are datetime on xAxis, and average numbers for yAxis. When I load the page with my chart, I have a nice xAxis display with a label for every other month, which allows the chart to be nicely presented, and readable.
Whenever I click the legend button to hide this series, (I still show the xAxis even if the chart is now empty), and then click it again to show it, the xAxis now displays every month (twice as many as before) and the label texts are overlapping each other.
If I try to hide and display the series again, I have the same result.
Could it be that once the hide function is fired by the legend button, it is deleting some of my options, or is changing them automatically?
Basically, all I want is to keep the "every other month" label display for my xAxis, no matter how many times I hide or toggle my series.
EDIT : I tried to set chart.ignoreHiddenSeries to false and the xAxis is not changing anymore, but I kinda wanted to keep the scalable feature for the yAxis... And now when I toggle or hide another series, the yAxis stands still.
Any workaround? This is just a half solution for me.
You can try to use showEmpty() function http://api.highcharts.com/highcharts#xAxis.showEmpty
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 have a simple layout of a Pivot containing two PivotItems, the first of which has a TextBox. I've set the margin of the first pivot item to zero because I want the contents to cover the whole width of the screen. The problem is that when the text box receives the focus, the pivot item (and its contents) jumps to the right by abount 10 pixels, which isn't a great experience.
I've tried calling UpdateLayout in the text box's GotFocus event, but it had no effect. Placing the text box in a Grid and setting a negative margin to that instead of the pivot item also didn't do anything.
Any thoughts as to how to fix this annoying visual hiccup? Thanks.
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 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).