Can I have a chart automatically size the height (rather than using 400px) using the Highcharts .NET Wrapper?

Question

There is another similar question, but that seems to be focused on the js library, not Highsoft.Highcharts (and I'm using v8.1.1.1) I tried some of these solutions, but they didn't seem to work.

Answer 1

Try to use those CSS options:

body, html {
  height: 100%;
}
#container {
  height: 100%;
}

Answer 2

Not the most elegant when you're working with a .NET wrapper, but this seemed to work (from a colleague of mine). When using the wrapper, "chart" comes from the Id of the Highcharts object. So you will need to change that if you use something else for Id.

var chart = new Highcharts { Id = "chart" };

And then this script in the .cshtml file:

<script>
    $(window).load(function () {
        // "chart" is the Id of the Highcharts container
        var chart = $('#chart').highcharts();
        var width = $('#chart').width();
        // 100 is an approximation for the hight of the navbar + margin for panel. Removing that from the entire height of the window.
        var height = $(window).innerHeight() - 100;
        $('panel-body').height = height;
        // setsize will trigger the graph redraw 
        chart.setSize(width, height, false);
    });
    $(window).resize(function () {
        // "chart" is the Id of the Highcharts container
        var chart = $('#chart').highcharts();
        var width = $('#chart').width();
        // 100 is an approximation for the hight of the navbar + margin for panel. Removing that from the entire height of the window.
        var height = $(window).innerHeight() - 100;
        // setsize will trigger the graph redraw 
        chart.setSize(width, height, false);
    });
</script>