renderTo does not work as expected

[dilotec-2015]

Describe the bug

i want to render two chart in div wrapper like this:

    <div class="row">
      <div id="containerLeft{{index}}" class="chart-wrapper">
        <highcharts-chart
          [Highcharts]="Highcharts"
          [options]="optionsLeft"
        >
        </highcharts-chart>
      </div>
      <div>
        <ng-content select="di-left-legend"> some content </ng-content>
      </div>
    </div>
  </div>
  <div class="col-12 col-lg-7">
    <div class="row">
      <div id="containerRight{{index}}" class="chart-wrapper">
        <highcharts-chart
          [Highcharts]="Highcharts"
          [options]="optionsRight"
        >
        </highcharts-chart>
      </div>
      <div>
        <ng-content select="di-right-legend"> some content </ng-content>
      </div>
    </div>

the options are like this:

this.optionsLeft.chart.renderTo = 'containerLeft' + this.index;
this.optionsLeft.series[0].data = this.seriesDataLeft;
this.optionsRight.chart.renderTo = 'containerRight' + this.index;
this.optionsRight.series[0].data = this.seriesDataRight;

Expected behavior

the charts should be visible exactly in the "chart-wrapper"

expecting this: (working with "angular2-highcharts")

but i get this: (not working with "highcharts-angular")

Setup used

Angular CLI: 10.2.0 Node: 12.18.3 OS: win32 x64

Angular: 10.2.3 ... animations, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1002.0 @angular-devkit/build-angular 0.1002.0 @angular-devkit/core 10.2.0 @angular-devkit/schematics 10.2.0 @angular/cdk 10.2.7 @angular/cli 10.2.0 @angular/flex-layout 10.0.0-beta.32 @angular/material 10.2.7 @schematics/angular 10.2.0 @schematics/update 0.1002.0 rxjs 6.5.5 typescript 3.9.7

[karolkolodziej]

In this wrapper, there is no need to specify the 'renderTo' property because the wrapper returns the finished chart. Simply add the chart component to the HTML tree in a place where you would like to show it.

<div class="col-sm">
     <highcharts-chart [Highcharts]="Highcharts" [options]="chartOptionsLeft"></highcharts-chart>
</div>

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-sr6q9q

[dilotec-2015]

Hi Karol,

thank you for the answer. 😊

Now the problem is that the chart is still bigger than the container. I’m do not setting the size of the chart… And visually nothing changed. The container is red-bordered, and the chart ist green-bordered:

[cid:image002.png@01D6D218.FEC093D0]

How to „autosize“ the chart to always fit the container? Also on resize the window of the webbrowser.

thanks

Von: Karol Kołodziej notifications@github.com Gesendet: Montag, 14. Dezember 2020 12:25 An: highcharts/highcharts-angular highcharts-angular@noreply.github.com Cc: Waldemar Scholtyssek W.Scholtyssek@dilotec.de; Author author@noreply.github.com Betreff: Re: [highcharts/highcharts-angular] renderTo does not work as expected (#246)

In this wrapper, there is no need to specify the 'renderTo' property because the wrapper returns the finished chart. Simply add the chart component to the HTML tree in a place where you would like to show it.

Demo: https://stackblitz.com/edit/highcharts-angular-basic-line-sr6q9q

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/highcharts/highcharts-angular/issues/246#issuecomment-744375706, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AEBXZVEX43OLDUSHQUI4RHDSUXYYTANCNFSM4U2Q55MA.

[karolkolodziej]

I don't see your picture so it's hard to comment that. But from your description, it looks like the reflow method might help. More information in the API: https://api.highcharts.com/class-reference/Highcharts.Chart#reflow

[karolkolodziej]

Closed due to inactivity.

[Unknown008]

I have edited the stackblitz posted earlier. Is there a way to have the chart fit to the column on the right? Essentially, if the window is resized, the chart should as well, but right now, the chart is of fixed size and doesn't render to the div

https://stackblitz.com/edit/highcharts-angular-basic-line-taawor?file=src%2Fapp%2Fapp.component.html

I'm not sure how to use reflow here, the documentation linked use it in JS on the chart object and we have only the chart options here,

Or should I open a new ticket?

[karolkolodziej]

Your bootstrap class was not correctly applied. If you change that everything works as expected.

Demo with wrapper: https://stackblitz.com/edit/highcharts-angular-basic-line-cht8pd Demo without wrapper: https://stackblitz.com/edit/highcharts-angular-basic-line-kdoi8j