Adjust the width of Google chart to 100% automatically when the page is resized in Angular version 4 or higher

My application has numerous responsive wrappers on the site, each predefined from an API and containing a Google chart. The problem is that when the page initially loads, the charts are rendered at a specific size, and resizing the window only affects the wrappers, not the charts themselves.

How can I achieve a similar effect to this example https://codepen.io/flopreynat/pen/BfLkA without using jQuery? Should this be implemented within a specific lifecycle in Angular (such as onChange) or simply a function?

I am using a library that solely retrieves data, so I do not have access to functions like this:


$(window).resize(function(){
  drawChart1();
  drawChart2();
});

Answer №1

Below is a guide on how to bind window resizing in Angular 4+:

import {ElementRef, HostListener, ViewChild} from '@angular/core';
import {GoogleChartComponent} from 'ng2-google-charts';

...

export class CustomChart {
  @ViewChild('chart') chart: GoogleChartComponent;
  ...
  @HostListener('window:resize', ['$event'])
  onWindowResize(event: any) {
    let selection = this.chart.wrapper.visualization.getSelection();
    this.chart.redraw();
    this.chart.wrapper.visualization.setSelection(selection);
    // you can omit the two lines preserving selection if not needed
  }
}

Answer №2

I have found a solution that worked well for me without the need for jQuery:

chartHeight = window.innerHeight * 0.35
chartWidth = window.innerWidth * 0.18
@HostListener('window:resize', ['$event'])
  onResize(event) {
    this.chartWidth = window.innerWidth * 0.18. //adjusting the factor accordingly
    this.chartHeight = window.innerHeight * 0.35
<div (window:resize)="onResize($event)"></div>
.
.
<google-chart [width]="chartWidth" [height]="chartHeight" ... >

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

The styled horizontal list item has a background color that is not covering the entire

After setting up my CSS, I noticed a discrepancy in how the background color behaves when hovering over links in the navigation versus links in the footer. While the entire "button" area is filled with the background color in the nav, only the space behind ...

When should I schedule the execution of the .spec and .po.ts files in Protractor?

Curious about TypeScript and Protractor: I have a couple of basic helper functions stored in a shared.po.ts file within my Protractor suite. These functions are triggered by the third it() in my .spec file - meaning they are not immediately called upon ru ...

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

Transferring an Angular 2 component with output parameters to Angular 1 via Downgrade

After successfully downgrading an Angular 7 component to Angular 1, I encountered a small issue that has proven difficult to resolve. The output parameter in my downgraded component is defined as: @Output()isValid = new EventEmitter<boolean>(); An ...

Ways to hover and efficiently organize components?

My elements are floated with a width of 20%, resulting in 5 elements per line. The current arrangement looks like this: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Now, I want to reorganize them vertically as follows: 1 4 7 10 13 2 ...

What is the syntax for creating a link tag with interpolation in Angular 2 / Ionic 2?

As I work on developing an app using Ionic 2/Angular 2, I have encountered a challenge that I am struggling to overcome. Let me provide some context: I am retrieving multiple strings from a webservice, and some of these strings contain links. Here is an e ...

Angular 2 - Utilizing `return` in the `then` method for async operations

Currently, I am facing a scenario where it would be very useful if there was a way to retrieve the value obtained in the .then() function. Allow me to explain why and what exactly I need. For almost every API call, I need to include the API_KEY and DEVIC ...

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

Looking to enhance the style of the Download button as it appears too formal. Seeking assistance in adding some button styles to make it more stylish. The code is correct, just aiming to give the Download button a trendy look with specified styles. ...

Is there any advantage to placing buttons within an HTML form?

What benefits are there to placing a button within an HTML form as opposed to directly in the body? <form id="viewForm" method="post"> <input id="editBtn" type="button" value="Edit" /> </form> ...

Align a div to the center horizontally at the top of the screen

Is there a way to vertically center text within a div and also horizontally center the div at the top of the screen? Visit this link for more details <div id='custom'> example text </div> #custom{ width: 50%; background: #FF00 ...

How to effectively utilize Python to compare HTML files

Can the HTML be compared differently as shown below? html_1 = "<h1>text<h1>" html_2 = "<h2>text<h2>" Using Google's diff_prettyHtml may not yield accurate results. If I want to say that 1 has changed to 2: <h <del styl ...

Utilizing Custom Validators in Angular to Enhance Accessibility

I'm struggling to access my service to perform validator checks, but all I'm getting is a console filled with errors. I believe it's just a syntax issue that's tripping me up. Validator: import { DataService } from './services/da ...

`Angular 10 project fails to include JWT refresh token in cross-origin requests`

Our development setup includes an Angular front end and a web service running on a different port on the same machine. The web service is configured to allow access from localhost and the port hosting the Angular application. We are utilizing JWT authenti ...

The route seems to be downloading the page instead of properly rendering it for display

I'm facing a simple issue with my Express page - when I navigate to the FAQ route, instead of displaying the page it downloads it. The index page loads fine, and the FAQ page is the only other page available at the moment. I am using EJS templating, a ...

Creating a div that automatically scrolls along with the page as it reaches the edges of the viewport

My website features a floating box on the side of the page (Parent div) housing a child div with a position:sticky property that scrolls along with the page as it reaches the top of the viewport. See it in action here: https://codepen.io/Xanthippus480/pen/ ...

Are there any other options similar to PhantomJs that offer support for CSS 3D effects?

I am working on capturing a webpage using NodeJs. My current setup involves using PhantomJs to capture screenshots of the page and ffmpeg to convert them into videos. However, I have encountered an issue where the page contains 3D transform CSS, which is n ...

Leveraging Vue's "v-slot" functionality to create a specified slot within a JavaScript object

I have turned to this platform seeking guidance on using "v-slot" while utilizing a syntax that involves a javascript object. This specific method was introduced in the online course Intro to Vue3 which I recently completed. Below is an image de ...

What is the best way to ensure a CSS element maintains its position margins even after adjusting them with JavaScript?

Currently, I am in the process of developing a minesweeper game using a combination of HTML, CSS, and JavaScript. The code snippet I am utilizing to generate the grid is as follows: <div id="game-space"></div> <script type="t ...

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

How can I redirect after the back button is pressed?

I am currently working with a trio of apps and scripts. The first app allows the user to choose a value, which is then passed on to the second script. This script fetches data from a database and generates XML, which is subsequently posted to an Eclipse/J ...