0

I'm implementing the highcharts in a ionic 6 app using the highchart-angular library and when i load the component the chart doesnt adapt to the size of the page

I'm using the blank ionic template and using a default sample of the highchart-angular

Here is my code https://stackblitz.com/edit/angular-ivy-asdse6?file=src%2Fapp%2Fhome%2Fhome.page.scss

my html is this

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title> Blank </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">Blank</ion-title>
    </ion-toolbar>
  </ion-header>

  <div id="container">
    <highcharts-chart
      [Highcharts]="highcharts"
      [options]="chartOptions"
      class="chart"
      (chartInstance)="setChart($event)"
      (resized)="chart?.reflow()"
    >
    </highcharts-chart>
  </div>
</ion-content>

and the component typescript is this

import {
  AfterViewInit,
  Component,
  ElementRef,
  OnInit,
  ViewChild,
} from '@angular/core';
import * as Highcharts from 'highcharts';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit, AfterViewInit {
  @ViewChild('chart', { static: false })
  container: ElementRef<HTMLDivElement>;
  chart: Highcharts.Chart;
  stack: Highcharts.OptionsStackingValue = undefined;
  chartType = 'bar';
  highcharts: typeof Highcharts = Highcharts;
  chartOptions: Highcharts.Options = {
    chart: {
      type: this.chartType,
    },
    title: {
      text: '',
    },
    legend: {
      enabled: false,
    },
    plotOptions: {
      series: {
        stacking: this.stack,
      },
    },
    series: [
      {
        data: [10, 3],
        type: undefined,
      },
      {
        data: [100, 3],
        type: undefined,
      },
    ],
  };

  constructor() {}

  ngAfterViewInit(): void {}

  setChart(chart: Highcharts.Chart) {
    this.chart = chart;
  }

  ngOnInit() {}
}
Anderson Peñaloza
  • 41
  • 3

1 Answers1

0

i found the issue with the code

to make the chart to fit the container i have to add and event and call the .reflow(); method like this

  chartCallback(chart): void {
    setTimeout(() => {
      chart.reflow();
    }, 0);
  }

and in the component like this

  <highcharts-chart
    class="chart"
    [Highcharts]="highcharts"
    [options]="chartOptions"
    (chartInstance)="setChart($event)"
    [callbackFunction]="chartCallback"
    (resized)="chart?.reflow()"
  >
  </highcharts-chart>

I also updated the stackblitz code

Anderson Peñaloza
  • 41
  • 3