How to use height-responsive? about highcharts-chart

[avdaredevil]

Yeah hight-responsive lets you reflow the chart height wise as well. I've included an example in this fiddle.

The basic premise is that hight-responsive makes the element have no inherent height, so you could either give height to the <highcharts-chart> element or its parent (by setting <highcharts-chart>'s height to 100%).

But that will not reflow the chart for you! Since changing an elements height does not trigger an event, thus you still need to manually run the resizeChart() function on the component as soon as it's parent is loaded and visible.

[lycandroid]

Thanks, yes I can see that working so my problem must be something else I'm doing wrong which I can't figure out at the moment. I'm wrapping your highcharts-chart in my own (polymer 2.x) component so I'm no doubt doing something wrong there.

In the meantime I added Polymer.IronResizableBehavior to my component and handle the iron-resize with:

    _onResize(e) {
      var chart = this.$.chart;
      var renderer = this.$.chart.renderer;

      if ( renderer.width != this.offsetWidth || renderer.height != this.offsetHeight )
        chart._chart.setSize(this.offsetWidth, this.offsetHeight, false );
    }

I suppose possibly you could add iron-resize support to highcharts-chart then it would auto adjust height without requiring the manual call to resizeChart()?

[avdaredevil]

Sure that sounds like a splendid idea! I would however remark that your resize implementation may not be very performance friendly. The difference between reflow() and setSize() is very noticeable. I'd recommend the former.

[avdaredevil]

@lycandroid A polymer 2.0 version of this lib is now completed if you'd like to use that instead. It's under the branch polymer-2.0!

Branch: polymer-2.0
PR: #24