I was recently tasked with creating some charts using Highcharts. Up to this point I hadn’t the opportunity to deal with the other JavaScript chart libraries that are available. I had no idea what was to come of this new adventure I was to embark upon for several days. I will preface with the following that I was trying to use Highcharts using the Dart language. I will write another post about that, but for now lets help the people out there trying to get their Highcharts to render within flexboxes.

Out of the box Highcharts only responds to the growth of an HTML element. It fails miserably at the shrinking. I was bouncing ideas off other people (just my boss) I thought I was going to have modify the source code and use that version for my charts. This was the last thing I wanted to do and my boss agreed that this would be the worse case scenario.

For those of you wondering why this would be the worse case scenario I will explain. The others who fully understand the impact of having a custom version of a library in your code please go to the next paragraph. Modifying and creating your own JavaScript library is a potential dangerous situation. Unless you have personally developed this library yourself, you have no idea what the ramifications of your changes will have on other parts of the library. As a younger developer I had once modified the JavaScript library locally for bootstrap. Now why did I do this? I do not remember why, but I can tell you that it was specifically so I could do something that was conflicting with my code. In short my change to the local JavaScript file prevented an expected action to fail miserably. I had been moved off to another project and my co-worker was frustrated with an issue that had nothing to do with his abilities. It was my own naiveness and ignorance of what happens when you change code. It caused my co-worker to spend a few frustrating hours and plenty of cursing at the screen.

So after googling for a few hours looking for solutions and praying that someone figured this out I eventually stumbled upon this article. Finally I found something that allowed me to modify the framework, but yet do so in a way that worked with the current framework. The wrap utility allows developers to write code for public functions that occur before the specified method, after it and even in replacement of the method. After trying a few things I was able to come up with this solution.

(function (H) {
    H.wrap(H.Chart.prototype, 'reflow', function (proceed, e) {

        //before the original method
        var chart = this;

        chart.container.style.display = "none";
        chart.container.style.height = "0px";
        chart.container.style.width = "0px";

        //original method
        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        //after original method
        chart.container.style.display = "block";
    });
}(Highcharts));

The above code wraps the reflow function that is attached to the window.resize function. The first portion of the code hides the chart container from the user, but it is still in the DOM. This allows the chart container to size properly. Next we call the original method and it calculates the size of the chart. Once this is done we re-show the chart to the user.

I would like to come up with a solution that just re-sizes to the proper size without having to shrink it down to nothing. It is not perfect because you have to hide and shrink the chart to nothing, allow Highcharts to calculate the container and eventually re-show the chart. At times you may not see the chart, but that’s because it’s caught between stages and hasn’t updated yet. This will go away once you re-size the screen again. It occurs more frequently when you are slowly shrinking the screen. Other than the rare hiccups I would call this an effective solution for placing Highcharts inside of flexboxes and percentage sized HTML elements.