Knockout Highcharts could not find rendering div

When using knockout with HighCharts, a frequest issue is that highcharts library is unable to find the rendering div simply since it gets loaded earlier than the knockout dom.

I found a blog which explains a custom knockout binding handler to fix just this specific issue

The binding handler is

ko.bindingHandlers.initHighCharts ={
        init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            var val = ko.unwrap(valueAccessor());
            if(val.data){
                try {
                    $(element).highcharts(val.data);
                } catch(e){
                    console.log(e);
                }
            }
        },
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {

        }
    };

And the html code is

<div class="row">
<div class="col-md-10 no-margin">
    <div class="well container">
        <div data-bind="initHighCharts: {data: chartingOptions}"></div>
    </div>
</div>
</div>