chart doesn't fit in the device size (Ionic app)

[saurabh47]

Hello guys,
I'm using Highcharts in my Ionic 4 app. I'm using the highcharts-angular library.
when an app initially gets loaded. the chart doesn't fit the device size. I have tried compiled app on my android device. the same issue is happening.

After resizing the screen chart fit screen properly.
please help me.
I have also tried to change the width & height property. But it doesn't work.

someone also mentioned the same issue:-
https://stackoverflow.com/questions/55886989/example-highcharts-in-ionic-4?answertab=votes#tab-top

My code:-
<highcharts-chart style="display: flex;" [Highcharts]="Highcharts" [constructorType]="chartConstructor" [options]="chartOptions" ></highcharts-chart>

Ionic:

Ionic CLI : 5.0.2 (C:\Users\SaurabhGangamwar\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.6.0
@angular-devkit/build-angular : 0.13.9
@angular-devkit/schematics : 7.3.9
@angular/cli : 7.3.9
@ionic/angular-toolkit : 1.5.1

Cordova:

Cordova CLI : 9.0.0 (cordova-lib@9.0.1)
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.7

"highcharts": "^7.1.2",
"highcharts-angular": "^2.4.0",

Here is my complete code
https://github.com/saurabh47/charts-ionic

[KacperMadej]

Hi @saurabh47

Thank you for contacting us about the problem.

Your repository doesn't look like it contains Highcharts or Highcharts Angular wrapper.
https://github.com/saurabh47/charts-ionic/search?q=highcharts&unscoped_q=highcharts

The problem you have described looks like a problem with CSS and layout. You could check if style for the chart container is correctly set and in case a resize is done to the layout without triggering a resize event that would cause Highcharts chart to adjust to new container size you could call chart.reflow().

If you will be able to provide a working demo, showing the problem, that I could debug then I could check the code and suggest a tested solution.

[saurabh47]

thanks for your reply.
sorry, forget to push changes to the repository.
please take look at my code.

I have not added any custom CSS.
I just tried CSS styles flex and block but it didn't work.

style="display: flex;"

[saurabh47]

@KacperMadej
Please help, I have been stuck on this problem from the past 2 days.
thanks

[KacperMadej]

The "display: flex;" is not allowing Highcharts code to get container width and height at the time of initial chart size calculations. This could be resolved by postponing the component or by setting the chart options with a slight delay - long enough to wait for the layout and short enough to not be noticeable for the chart user. Just calling chart.reflow() in chart's callback with a minimal delay will be enough if you don't care about initial animation. If you care please see the below code:

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts/highcharts.src.js';

@Component({
  selector: 'app-my-chart',
  templateUrl: './my-chart.component.html',
  styleUrls: ['./my-chart.component.scss'],
})
export class MyChartComponent implements OnInit {

  months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  chart;
  updateFromInput = false;
  Highcharts = Highcharts;
  chartConstructor = 'chart';
  chartCallback = (chart) => {
    setTimeout(()=>{
      chart.reflow();
      this.chartOptions = {
        chart: {
          type: 'column',
        },
        title: {
          text: 'Fruit Consumption'
        },
        xAxis: {
          categories: this.months
        },
        yAxis: {
          title: {
            text: 'Fruit eaten'
          }
        },
        series: [{
          name: 'Jane',
          data: [1, 0, 4,1,2,3,6,7,8,4,1,6]
        }, {
          name: 'John',
          data: [1, 0, 4,1,2,3,6,7,8,4,1,6]
        }]
      };
    }, 0);
  };
  chartOptions = {};
  constructor() { }

  ngOnInit() {}

}

<highcharts-chart
        style="display: flex;"
        [Highcharts]="Highcharts"
        [constructorType]="chartConstructor"
        [options]="chartOptions"
        [callbackFunction]="chartCallback"
        [oneToOne]=true
      ></highcharts-chart>

This case is not a bug and should be resolved through Highcharts support - mostly to avoid the delay that you have experienced.

I hope this resolves your problem - I have tested this in your app, so it should be fine.
Please let me know if you have any more questions related to the case or if we could close the issue. @saurabh47

[saurabh47]

thank you so much @KacperMadej
It's working as expected.

[tuannd2207]

i don't understand why highcharts makes the chart fit the container by resizing the window. That is so fu**ing stupid. why don't you guys make it fit the container by the width of the container? why ?

[KacperMadej]

Hi,

We do make the chart fit the containrt by the width of the container.
If you, later on, change the width of the container then the currently implemented logic for that change detection runs on window resize event.

If you don't understand something you could use our support channels to get more info. The repo's issues for the Angular wrapper is not the right place to ask those questions.

Don't be rude like that or you will be reported and banned.
Have a nice day.

[Alay2812USC]

Hey , I am facing the same issue @KacperMadej . But your solution isnt working for me

[mconner]

I'm running into the same issue, though it only seems to happen under certain circumstances, (I'm guessing, due to timing).
I tried using the callbackFunction, as suggested, but I run into some other issues with my code expecting that the chart was initialized. I could probably work through this, but the underlying issue seems to be that element at highcharts-chart .highcharts-container is setting the style to 600px by 400px (i.e.: some default). Explicitly setting a style on the component does not seem to work, nor does calling reflow(), even with a 5 second delay. However, if I manually resize the containing element (this is in a dashboard widget, with resize handles), it sizes correctly.

I found that by using ng-deep, I can work around this:

:host {
...
  &::ng-deep highcharts-chart .highcharts-container {
        flex: 1 1 auto;
        width: auto !important; // EDIT: Seems I need to set the width (or height if flex-direction is row) as well.
   }
...
}

Or similarly using: width: 100% !important, instead of flex Either way, I'm basically overriding width and height styles explicitly being set on the element through scss. Clearly, this is a expedient hack, and may have side effects. In my case, I've a single chart in the enclosing element, so that simplifies things.

I do understand tuannd2207's frustration (but, yeah, rude), but this seems to be more of a highcharts issue than a highcharts-angular issue, if I understand correctly.