Line chart tooltip is displayed wrong

I'm submitting a ... (check one with "x")

[ X] bug report - search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request - use StackOverflow (add the ngx-charts tag) or the gitter chat for support questions

Current behavior When using the chart inside a flex container, the chart tooltip takes the entire height of the screen

Expected behavior Tooltip has the needed width and height according the the data it contains

Reproduction of the problem My HTML Code:

    <div class="charts" *ngIf="classroom.insights; let insights">
      <!-- Motivation Chart  -->
      <div class="motivation-chart">

        <div class="chart-header">
          <div i18n class="chart-caption">Motivation</div>
          <div class="avg">
              <span class="score">{{ insights.motivation_avg }}</span>
              <span class="out-of">/5</span>
          </div>
        </div>

        <div class="chart"
             [style.backgroundImage]="'url(../../../assets/images/chart-bg.svg)'">
            <ngx-charts-line-chart 
            [scheme]="colorScheme"
            [results]="multi">
            </ngx-charts-line-chart>
        </div>

        <div class="class-avg">
          <span i18n>Class Avg.</span>
          <img src="../../../assets/images/triangle-up.svg"
                *ngIf="insights.motivation_delta >= 0"/>
          <img src="../../../assets/images/triangle-down.svg"
                *ngIf="insights.motivation_delta < 0"/>
          <span>{{ insights.motivation_delta }}%</span>
        </div>
      </div>

      <div class="chart-seperator"></div>

      <!-- Confidence Chart  -->
      <div class="confidence-chart">

        <div class="chart-header">
          <div i18n class="chart-caption">Confidence</div>
          <div class="avg">
              <span class="score">{{ insights.confidence_avg }}</span>
              <span class="out-of">/5</span>
          </div>
        </div>

        <div class="chart"
             [style.backgroundImage]="'url(../../../assets/images/chart-bg.svg)'">
            <ngx-charts-line-chart 
            [showGridLines]="showGridLines"
            [scheme]="colorScheme"
            [tooltipDisabled]="'true'"
            [results]="multi"
            [autoScale]="autoScale">
            </ngx-charts-line-chart>
        </div>

        <div class="class-avg">
          <span i18n>Class Avg.</span>
          <img src="../../../assets/images/triangle-up.svg"
                *ngIf="insights.confidence_delta >= 0"/>
          <img src="../../../assets/images/triangle-down.svg"
                *ngIf="insights.confidence_delta < 0"/>
          <span>{{ insights.confidence_delta }}%</span>
        </div>
      </div>

      <div class="chart-seperator"></div>

      <!-- Proficiency Chart  -->
      <div class="proficiency-chart">

        <div class="chart-header">
          <div i18n class="chart-caption">Proficiency</div>
          <div class="avg">
              <span class="score">{{ insights.proficiency_avg }}</span>
              <span class="out-of">/5</span>
          </div>
        </div>

        <div class="chart"
             [style.backgroundImage]="'url(../../../assets/images/chart-bg.svg)'">
            <ngx-charts-line-chart 
            [scheme]="colorScheme"
            [tooltipDisabled]="'true'"
            [results]="multi"
            [autoScale]="autoScale">
            </ngx-charts-line-chart>
        </div>

        <div class="class-avg">
          <span i18n>Class Avg.</span>
          <img src="../../../assets/images/triangle-up.svg"
               *ngIf="insights.proficiency_delta >= 0"/>
          <img src="../../../assets/images/triangle-down.svg"
               *ngIf="insights.proficiency_delta < 0"/>
          <span>{{ insights.proficiency_delta }}%</span>
        </div>
      </div>
    </div>

My SCSS code:

 .charts {
                display: flex;
                flex: 1;

                .motivation-chart,
                .confidence-chart,
                .proficiency-chart {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    margin: 0 20px;

                    .chart-header {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        font-family: RobotoSlab;
                        font-size: 22px;
                        font-weight: normal;
                        font-style: normal;
                        font-stretch: normal;
                        line-height: normal;
                        letter-spacing: normal;
                        text-align: center;

                        .chart-caption {
                            margin-top: 5px;
                        }

                        .avg {
                            .score {
                                font-size: 60px;
                            }

                            .out-of {
                                font-size: 20px;
                            }
                        }
                    }

                    .chart {
                        flex: 1;
                        max-height: 80px;

                        ngx-charts-tooltip-area {
                            max-width: 10px;
                            max-height: 10px;
                            background: red;
                        }
                    }

                    .class-avg {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 5px;
                        font-family: AvenirNext;
                        font-size: 18px;
                        font-weight: 600;
                        font-style: normal;
                        font-stretch: normal;
                        line-height: normal;
                        letter-spacing: normal;
                        color: #000000;

                        span, img {
                            margin-right: 5px;
                        }
                    }
                }

                .motivation-chart {
                    color: #fe554e;
                }

                .confidence-chart {
                    color: #51cdcb;
                }

                .proficiency-chart {
                    color: #93278f;
                }

                .chart-seperator {
                    width: 2px;
                    height: 150px;
                    align-self: center;
                    background-color: #979797;
                }
            }

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

ngx-charts version: x.x.x 7.4.0
Angular version: x.x.x 5.0.0
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ] Chrome 68.0.3440.84
Language: [all | TypeScript X.X | ES6/7 | ES5] Typescript 2.4.0

swimlane / ngx-charts

Line chart tooltip is displayed wrong #950