jquerycssdynamichighchartshighslide

How to dynamically resize a highslide popup called from a Highchart graph using jquery?


Below is the section of jquery code where the highslide popup is called - hs.htmlExpand(). I want to be able to resize the popup dynamically. If this is not possible, maybe auto resize would work for me. The reason I want to resize dynamically is because the text within the popup will change dynamically as well.

point: {
  events: {
    click: function() {

           hs.htmlExpand(null, {
              pageOrigin: {
                   x: this.pageX,
                   y: this.pageY
              },
              headingText: 'Error Rate',
              maincontentText: 'test',
              width: 220
            });
     }
  }
}, ...

Here is a working fiddle: http://jsfiddle.net/e2qpa/1200/

I have come across the following code in the Highslide documentation but I don't know how to use it in this context:

void hs.Expander.prototype.resizeTo ( int width, int height )
void hs.Expander.prototype.reflow()

Solution

  • If you call hs.getExpander(), it'll return the last opened expander. Then you can use:

    var ex = hs.getExpander();
    ex.resizeTo(600,600);
    

    reflow() worked well with updated content:

    var ex = hs.getExpander();
    ex.maincontent.innerHTML = "alkdfjalkdjf<br/>laksjdflaksjdf<br/>asjkdf<br/>lajkdf<br/>asjkdfl<br/>aksjdflkasjdflk<br/>ajsdfl<br/>kjasdfl<br/>kjasdfkl";
    ex.reflow();
    

    Example here.