Failure of Highchart's resizing mechanism when hidden

Check out this AngularJS demo app featuring Highcharts: http://jsfiddle.net/dennismadsen/dpw8b8vv/1/

<div ng-app="myapp">
    <div ng-controller="myctrl">
        <button ng-click="hideView()">1. Hide</button>
        <button ng-click="showView()">2. Show</button>
        <div id="container" ng-show="show">
            <highchart id="chart1" config="highchartsNG"></highchart>
        </div>
    </div>
</div>

If you adjust the width of the result view in JSFiddle, the Highchart will automatically resize its width to fit the container (the div with a black border).

I've observed that when the Highchart is hidden and the window is resized, it does not automatically adjust its size (such as when an iPad changes from Landscape to Portrait mode). Test this by first clicking the "1. hide" button, resizing the result view, and then pressing the "2. show" button. See this example:

Is there a way to make the Highchart resize even when it's not visible?

Answer №1

According to the guidelines provided, it is necessary to utilize the reflow method in situations where the resize event is not captured by the chart.

By triggering the reflow method within a $timeout, the chart will be rendered correctly.

$scope.showView = function () {
        $scope.show = true;
        $timeout(function () {
            $scope.highchartsNG.getHighcharts().reflow()
        });
    }

Interactive example on JSFiddle

Answer №2

The current behavior seems correct to me.

However, if you want the graph size to adjust correctly after it is displayed, you can manually trigger a resize event like this:

setTimeout(function () {
    $(window).trigger('resize');
}, 1);

This uses jQuery to accomplish the task. There may be an angular method as well, but I am not familiar with it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Attempting to assign a value in ng-init that was only established after loading the model and making two AJAX calls

Let me explain, The project I'm currently working on involves a spinoff of phonegap. I am facing a situation where I need to wait for an AJAX response before setting the ng-init value. Typically, you can set it like this: ng-init = "ng-model = arr[0] ...

Why is the outline buttons class only displaying gray colors for me?

I'm having trouble with the outline buttons class (btn btn-outline-primary) in Bootstrap. For some reason, all the buttons appear gray instead of colored as they should. Here's an example of how the buttons should look: https://ibb.co/ChKf83y, bu ...

What are some key considerations for creating a website that is optimized for printing?

I am working on creating a website filled with content that I want to optimize for printing. My goal is to have the content easily printable without any unnecessary elements like navigation or advertisements. To achieve this, I am considering using two sep ...

I'm trying to determine which jQuery event would be more beneficial for my needs - should I go with

I'm facing a dilemma On my website, I need to capture the value of a span within a modal. The value changes when the modal is opened and reverts to the old value when closed. This particular value represents the cart total in my online store. Wheneve ...

Unable to alter or eliminate the grey background using material-ui

Struggling with a React application that incorporates material-ui. Despite my efforts, I can't seem to get rid of an unwanted grey background in one section of the app. Attempted solutions: body { background-color: #ffffff !important; } * { b ...

Displaying recursively retrieved data from an AJAX call on an HTML page using AngularJS

I am currently working on a recursive AJAX call where I receive server data in chunks. My goal is to display each chunk of data one below another on the front end. How can I achieve this without replacing previously received data with new data? I hope this ...

List with pulldown options

I am trying to implement a drop-down list with bullets using Angular 2, JavaScript, and CSS. Although I have managed to create the drop-down list, I am facing difficulty in adding bullets to the list items. Unfortunately, I have found that jQuery and Boot ...

Chrome compatibility issue with margin collapsing

I'm currently working on a website and encountering a CSS issue. It appears fine in Firefox, but has some odd layout problems in Chrome. I would appreciate any assistance on how to resolve this issue. On the main page, if you scroll down, you'll ...

Bootstrap UI Tab presents an obstacle for Google Map functionality

When utilizing the Bootstrap Tabset to include a Bootstrap slider, Google Map, and other pages, I encountered an issue where the slider functions perfectly but the Google Map does not work as expected. Interestingly, the map works perfectly in street view ...

CSS Transition not activating upon initial mouseover

My attempt at a simple transition is not working properly on Safari. I am trying to change background images from A to B on hover, but the transition is not smooth when I first hover over the element. Instead of gradually fading in/out, it instantly change ...

I'm experiencing an issue with my Bootstrap Navbar Toggle not toggling

Struggling for weeks now to figure out what's wrong with this code. It works perfectly until I resize the browser, then the menu stays open no matter how many times I click the toggle. I want it to be closed by default and only open when the toggle is ...

Restrict the size of an image within a div by setting a maximum height and allowing the width

While this code snippet functions perfectly in WebKit browsers, it encounters issues when used in IE and Firefox. Unfortunately, due to other necessary functionalities, using the img tag is essential, making background-image an unviable option. Code Snipp ...

Using AngularJS to invoke the ng-required directive and trigger a function

Is it possible to make the required value dependent on a function? Something similar to this? I need to achieve this in order to dynamically change the required attribute for form inputs... HTML: Name: <input type="text" ng-model="user.name" ng-r ...

The latest version of npm Boostrap (4.1.0) is missing some important CSS properties for the `background` tag

I am currently working on an Angular 5.2.10 project that utilizes angular-cli and bootstrap version: 4.0.0-beta.2 with a specific css class called .en-icon-24: .en-icon-24 { background: url(../../../../assets/img/icons.png) -370px 0px; width: 24 ...

When using the android phonegap application, the screen interface may not render properly and display a patch on the keypad area when the keypad is

Whenever I tap on a textbox, the system keypad pops up. But after entering text, if I click on any link instead of pressing the Go button on the keypad, the keypad disappears but leaves behind a random area or displays the previous screen. When navigating ...

bottom of the page contains the solution

I am currently working on creating a print stylesheet for my website. On each page, there is a footer that needs to be positioned at the bottom of the printed page, but only if there is a spacing of 30pt between the main content and the footer. In cases wh ...

Where is the best place to import Bootstrap in my SCSS file when customizing it with Sass?

When attempting to customize bootstrap using Sass, I discovered that overriding default bootstrap variables can be quite confusing. I am curious if someone could provide an explanation for the inconsistent behavior. Some variables only seem to be overridd ...

Using service as a parameter in a controller function in AngularJS

I am working on an Angular application where I have split the controller, view, and services into separate files. These are the files I'm using: home.controller.js angular .module('loc8rApp') .controller('homeCtrl', homeC ...

Fixing a div at the top post scroll - bug on iOS mobile device

I am looking to achieve a similar effect as demonstrated in the example below: https://css-tricks.com/scroll-fix-content/ Essentially, the goal is to have a div become fixed at the top of the page after scrolling to a certain point. Initially, the div wil ...

What is the process for sending a cross-site request to Azure's mobile service API?

When working with Azure's MobileServiceClient, jquery, or AngularJS, I have encountered a dilemma. The service necessitates a custom header, and now I am uncertain if it is possible to incorporate both simultaneously. ...