Angular2 charts rendered with highcharts may not adjust their height according to the parent container

Struggling to display charts using angular2-highcharts due to the chart not inheriting the parent div's height. Any suggestions on how to fix this issue?

If you'd like to take a look, here is the plunker link: https://plnkr.co/edit/tk0aR3NCdKtCo3IpVPsf?p=preview

Your help is greatly appreciated!

@Component({
selector: 'my-app',
directives: [CHART_DIRECTIVES],
styles: [`
  chart {
    display: block;
  }
  .c{
    height:200px;
  }
`]
template: `<div class="c"><chart [options]="options"></chart></div>`
})
class AppComponent {
constructor() {
    this.options = {
        title : { text : 'simple chart' },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2],
        }]
    };
}
options: Object;
}

Answer №1

Highcharts does not automatically determine the height of its containing element. You must specify the size it should be drawn, typically through CSS or inline styles.

Here are some suggestions to address this:

1) Set the chart height to auto:

styles: [`
    chart {
        display: block;
        height: auto; // instruct the chart to fill 100% of the 'c' container's height
    }
    .c{
        height:200px;
    }
`]

2) Explicitly make the chart match the height of its container:

styles: [`
    chart {
        display: block;
    }
    .c, chart { // apply this rule to both 'c' and the chart
        height:200px;
    }
`]

3) Use an inline style to define the chart's height:

template: `<div class="c"><chart [options]="options" style="height: 200px;"></chart></div>`

I trust these recommendations will prove useful for your task!

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

I'm having trouble getting any data to emit when I subscribe to a state service subject that stores a hovered element. What could I be missing?

I am currently working on a project that involves a calendar, a hover directive, and a stateful service for communication. Here's a simplified representation of my work so far: https://stackblitz.com/edit/stackblitz-starters-kvzyvy?file=src%2Fmain.ts ...

Is it possible to adjust the dimensions of the number input spinner?

When working with a number input that includes a spinner, I have encountered challenges in changing the size of the spinner itself. Specifically, I am referring to the <input type='number'> element. Despite my efforts to adjust its size thr ...

The Perfect Scrollbar feature is not functioning properly in conjunction with the accordion menu

I am having some trouble with implementing the Perfect Scrollbar alongside an accordion slider menu. The scrollbar is not working as expected, and you can view the fiddle here. On initial page load, the scrollbar only appears for the first sub-menu aft ...

Tips for linking a column value in a data table with Angular 7

I have an application where I retrieve data in a table format. This front end of this application is built on angular7. Now, I need certain column values to be links that when clicked will display a new component. For example: Column1 Column2 ...

Text fields do not show a cursor icon

On the website http://www.legrandclub.net, there are two text fields. Everything works fine in all web browsers except for Internet Explorer. When I click on one of the text fields, the cursor is not displayed, although it is possible to write text. What c ...

Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2? var i = 1; $('.progress .circle').removeClass().addClass('circle'); $('.progress .bar').removeClass().addClass(&a ...

Discover the steps to modify the input field type with just a keypress in angularjs

I need help changing an input field type from text to password. Currently, I am able to change the input field type from text to password when clicking on it. However, I also want the type to change from text to password when tab is pressed. Any assistan ...

Tips for creating animations using parent and child components in Angular

Despite my best efforts, it seems like this should be functioning properly... but unfortunately it's not... I'm attempting to achieve a transition effect on the parent element (ui-switch-groove) while the child element (ui-switch-dongle) moves. ...

The issue of the Dropdown Menu Not Remaining Fixed While Scrolling

There is a challenge with a Datetime Picker Dropdown Menu not staying in place when the user scrolls. Previous attempts to use .daterangepicker {position: fixed !important;} have been unsuccessful, causing the Datetime Picker to not stay fixed in its posit ...

Create stunning HTML emails by incorporating a transparent background color behind images and text

Is there a way to add text on a transparent background layer placed over an image without using the background-image property? In my case, I am working on an HTML Emailer and must utilize the img tag instead. Any suggestions on how to achieve this? < ...

Utilizing Jquery for toggling HTML elements and styling with CSS

I'm trying to implement a jQuery toggle button that switches between two states below; When I click the Toggle Button/link, everything in picture A (above the red line) should be hidden. Clicking the toggle button again would make it reappear. I&apo ...

Press the toggle button to switch the image display

Currently learning HTML and attempting to design a dashboard. I want to display the status (ON, OFF, OPEN, or CLOSED) of a room or door using an icon. I have images for open/close doors and lightbulbs. Need assistance in adding an element to all the exist ...

How can you create a table cell that is only partially editable while still allowing inline JavaScript functions to work?

Just a few days back, I posted a question similar to this one and received an incredibly helpful response. However, my attempt at creating a table calculator has hit a snag. Each table row in a particular column already has an assigned `id` to transform t ...

Firefox 3.5: The Notorious Code Copycat

Encountering an issue in Firefox 3.5.2 where after clicking a link on the page and then returning using the back button or another link, extra HTML code appears. Unsure if it's added by Firefox or related to PHP code. Unfortunately, unable to share t ...

Having trouble adjusting the space between the footer and the bottom of the page

Looking to create a footer using multiple elements The first element should be positioned at: left: 944px; top: 9749px; The second element should be positioned at: left: 715px; top: 9819px; The third element should be positioned at: left: 718px; top: ...

Start Transloco in Angular before the application begins

For our Angular project, we have implemented Transloco to handle translations. Within my typescript code, I am using the transloco service in this manner: this.translocoService.translate('foo.bar') I understand that it is crucial to ensure that ...

The type Observable<any> cannot be assigned to Observable<any> type

I am currently working with angular 5 and ionic 3. I have defined an interface: export interface IAny { getDataSource: Observable<any>; } Components that implement this interface must have the following method: getDataSource () { return ...

The spacing in MUI Grid results in the grid having extra left padding

I'm having trouble creating a grid with a group of elements, specifically when I try to add spacing between them. Take a look at the image below with spacing={0} set on the Grid container: No spacing in Grid container Now, here's what happens wh ...

Responsive design element order rearrangement

My code example is as follows: <div class="info-container"> <span class="item1">item1</span> <a class="item2" href="#">item2</a> <a class="item3" href="#">item3</a> </div> I want to rearran ...

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...