LeoDeveloper
Posts: 19
Joined: Mon Feb 24, 2020 9:33 am

Highcharts width not 100% (highcharts-angular)

Hi,

I'm using highcharts-anulgar (latest versions) and I set nearly all data asynchronous. So far it looks good. But the width is set initially to width=600 and height=400.

If I resize the browser window with the mouse a little bit the charts uses the full width. But not initially.

<highcharts-chart [Highcharts]="Highcharts" [constructorType]="chartConstructor" [options]="chartOptions"
[callbackFunction]="chartCallback" [(update)]="updateFlag" [oneToOne]="oneToOneFlag"
[runOutsideAngular]="runOutsideAngularFlag" style="width: 100%; display: block;"></highcharts-chart>

PS:
in init method I load the data from the backend and set it into the chart. Than I execute:
this.updateFlag = true;
this.cd.markForCheck();

Example:
https://i.stack.imgur.com/5Zoy8.png
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Highcharts width not 100% (highcharts-angular)

Hello,

Thanks for contacting us with your question!

Could you recreate the problem in an online editor that I could work on? It is hard to tell you what is not working and what could be done without taking look at your code.

Kind regards.
Mateusz Kornecki
Highcharts Developer
Mois
Posts: 9
Joined: Mon Apr 13, 2020 7:38 am

Re: Highcharts width not 100% (highcharts-angular)

Hello, the same issue, chart can't fit 100% of it's container. @mateuszkornecki You can use your example https://stackblitz.com/edit/highcharts- ... basic-line - how in this case to force chart be more than 600 pixels ?

"highcharts": "^8.1.2",
"highcharts-angular": "^2.7.0",

It works fine with angular-highcharts library.
Mois
Posts: 9
Joined: Mon Apr 13, 2020 7:38 am

Re: Highcharts width not 100% (highcharts-angular)

I'm sorry, problem resolved. Just besides width:100% we also need to add display: block;
mateuszkornecki
Posts: 1222
Joined: Mon Oct 28, 2019 10:29 am

Re: Highcharts width not 100% (highcharts-angular)

That's great to hear! In case of any further questions, feel free to contact us again.

Regards.
Mateusz Kornecki
Highcharts Developer
wiki572
Posts: 1
Joined: Thu Jan 28, 2021 6:59 pm

Re: Highcharts width not 100% (highcharts-angular)

Hey All,
I Use this in my angular code.

<highcharts-chart [Highcharts]="Highcharts" [options]="chartOptions" style="width: 100%; display: block; overflow: hidden;"></highcharts-chart>

but its still not working, on Resize its working fine, Kindly guide me regarding this matter.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts width not 100% (highcharts-angular)

Hi wiki572,

What that means the chart it's not working, could you explain more preciously and show this behavior on example?
This is an example with a width setting of 100% at Angular.

Live demo:
https://stackblitz.com/edit/highcharts- ... onent.html

I'm waiting for news from you.
Best regards.
Sebastian Hajdus
Highcharts Developer
Jornathan
Posts: 1
Joined: Tue Nov 08, 2022 4:33 am

Re: Highcharts width not 100% (highcharts-angular)

Width seems to work correctly in the sample. Could you please let me know how I can get the height to change in the same way?
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Highcharts width not 100% (highcharts-angular)

Hi Jornathan,
Thanks for your question.

The chart height is calculated in relation to the chart width according to the documentation.
https://api.highcharts.com/highcharts/chart.height
An explicit height for the chart. If a number, the height is given in pixels. If given a percentage string (for example '56%'), the height is given as the percentage of the actual chart width. This allows for preserving the aspect ratio across responsive sizes.

By default (when null) the height is calculated from the offset height of the containing element, or 400 pixels if the containing element's height is 0.

Code: Select all

    chart: {
      height: '100%'
    },

Demo in Angular:
https://stackblitz.com/edit/highcharts- ... mponent.ts

If you have any further comments please ask and provide more details on how the chart fits in your case.
Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Usage”