Responsive behaviour for ng-highcharts with compiled ng-click on xAxis labels hidden on load

Question

I have some ng-highcharts within tabs and collapsed section on a page one is also displayed as per a dropdown selection. All the charts are required to fit to the size of their container (containers are different sizes).

The xAxis labels on one of the charts has a ng-click added to it which works with a timeout and compile on load but when the chart is redrawn on resize these are lost.

Require full width charts as well as responsive behaviour for all charts hidden on load as well as maintaining the ng-click after resize.

jQuery is NOT being used for this project so looking for an angular / native javascript solution.

Working fiddle below with examples of current issues.

http://jsfiddle.net/7efavzh2/2/

The following will update the width of the charts but breaks all the compiled ng-click on labels.

$scope.collapseClick = function() {
    console.log('collapse click');
    //$scope.projectionChartConfig.options.chart.width = null;
}

Garth McRae Garth McRae · Accepted Answer · 2015-03-26T00:55:14

Added a resize event to window. On display of charts or resize updating the width parameter of the chart. Also compiling within a timeout to maintain ng-click on labels where required.

$scope.collapseClick = function() {
    console.log('collapse click');
    $scope.projectionChartConfig.options.chart.width = null;

    $timeout( function() {        
        var element = document.getElementById("chart1");
        console.log(element);
        $compile(element)($scope)
    }); 
}

// Listen to window resize and update width.
$scope.$on('window.resize', function() {
    console.log('resize');
    $timeout( function() {        
        var element = document.getElementById("chart1");
        console.log(element);
        $compile(element)($scope)
    }); 
});

http://jsfiddle.net/7efavzh2/3/

Responsive behaviour for ng-highcharts with compiled ng-click on xAxis labels hidden on load

1 Answers