User avatar
cailie
Posts: 81
Joined: Sun Aug 28, 2011 7:43 am
Location: Vancouver, BC, Canada
Contact: Website

manipulating chart in hidden container

Hello there,

Please see the following demonstration, adapted from one of your Highstock fiddles:

http://jsfiddle.net/cailie/zSyev/2/

Using the toggle buttons:
1. Hide the chart
2. Add data series and flag series to the chart
3. Show the chart

These actions result in rendering flaws:
* the event flags are misshapen and do not enclose their labels
* the time series selector strikes through the x-axis labels

Is this usage supported? In our application we want to allow similar user interaction while the chart resides on a hidden tab view.

Thank you!
hfrntt
Posts: 6393
Joined: Mon Aug 30, 2010 8:41 am
Contact: Website

Re: manipulating chart in hidden container

It's the same issue as here: http://highslide.com/forum/viewtopic.php?f=10&t=10712

The simplest and recommended solution is to hide chart behind the left/top margin.
Slawek Kolodziej
Highcharts support team
User avatar
cailie
Posts: 81
Joined: Sun Aug 28, 2011 7:43 am
Location: Vancouver, BC, Canada
Contact: Website

Re: manipulating chart in hidden container

Thanks Slawek.

I've previously used the off-left technique to work around similar dimension calculation problems. Now, for design reasons, we are using the 'visible' binding in KnockoutJS. The 'visible' binding applies 'display: none' to the element.

Just wanted to show you what happens as a result.

To work around this issue while still using 'display: none', we're redrawing the chart when it becomes visible again (but only if changes have been made to it while it was invisible).

Cheers,
-C
User avatar
cailie
Posts: 81
Joined: Sun Aug 28, 2011 7:43 am
Location: Vancouver, BC, Canada
Contact: Website

Re: manipulating chart in hidden container

Hi again,

These filed issues seem to suggest intended support for hidden containers:
https://github.com/highslide-software/h ... issues/608
https://github.com/highslide-software/h ... issues/883

I realize that this example is different in that it manipulates the chart when the chart is in a hidden container. Nonetheless, I will state that this is still an issue in the latest github snapshot:
http://jsfiddle.net/zSyev/20/

Thanks,
-C

Return to “Highcharts Stock”