1

I have a div element in gsp win which I am rendering a template containing highchart code. 

<div class="panel-body pan-bod col-md-12" id="container1">
    <g:render template="${resource(dir:'folder', file:'growthYTDBar')}"></g:render>
</div>

Following is the highchart code in template: 

<script>
    var zip= ${zip};
    var zipcount=${zipcount};

   $(function () {
    $('#container1').highcharts({
        chart: {
            type: 'column'
        events:{
        load: chart.redraw();}
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        xAxis: {
            categories: zip,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: ''
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '',
            data: zipcount


        }]
    });

});



</script>

When I load the main page (from where the template is being rendered) the highchart graph overflows. Upon a single-click/resizing/any activity on the page, it falls back to size. This probably is an issue with redraw. The chart is not able to redraw itself completely, so can it be called manually? That too on document.ready of the main page? Any other help?

Anshul Verma
  • 1,065
  • 1
  • 9
  • 26
  • try to add this to your css: `.highcharts-container{width:100% !important; height:100% !important;}` see this question: http://stackoverflow.com/questions/18240254/highcharts-width-exceeds-container-div-on-first-load – Taras Kohut Jul 05 '16 at 20:43
  • You may use chart.redraw() or chart.reflow on load of your chart. Here you can find information about this methods in Highcharts API: http://api.highcharts.com/highcharts#Chart.reflow http://api.highcharts.com/highcharts#Chart.redraw – Grzegorz Blachliński Jul 06 '16 at 13:48

0 Answers0