Проблема с отображением данных в Angular

Question

В настоящее время вертикальная линия рисуется там, где заканчивается первая часть p ie. Из-за этого он перезаписывает заголовок и в случаях, когда текст скрыт. Необходимо отображать вертикальную линию внизу во всех случаях.

Ниже мой компонент

import {
    Component,
    Input,
    AfterViewInit,
    NgZone,
    ChangeDetectionStrategy,
    OnChanges,
    Output,
    EventEmitter
} from '@angular/core';

declare var Plotly: any;

/**
 * Custom typing for plotly
 * TODO :: Use provided .d.ts
 */
export interface IPlotLayout {
    title: string;
    autosize: boolean;
    showlegend: boolean;
    separators: string;
    hidesources: boolean;
    xaxis: any;
    yaxis: any;
    yaxis2: any;
    margin: any;
    height: number;
    width: number;
    hovermode: 'closest' | 'x' | 'y' | false;
    hoverlabel: any;
    direction: 'clockwise' | 'counterclockwise';
    orientation: 'v' | 'h';
    legend: any;
    font: any;
    barmode: string;
    annotations: any;
}

@Component({
    selector: 'plot',
    template: `
        <div>
            <div id="chart{{ id }}"></div>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PlotlyComponent implements AfterViewInit, OnChanges {
    @Input() name: string;
    @Input() data: any[];
    @Input() layout: Partial<IPlotLayout>;
    @Input() options: any;
    @Input() id: string = '';
    @Input() style: {} = {};
    //is the view initialized for plotly.js to take action
    viewInitialized: boolean = false;
    @Input() downloadCSV: boolean = false;
    @Output() exportToCSV = new EventEmitter();

    _container;

    constructor(private zone: NgZone) { }

    ngAfterViewInit() {
        let d3 = Plotly.d3,
            WIDTH_IN_PERCENT_OF_PARENT = 95,
            HEIGHT_IN_PERCENT_OF_PARENT = 95;
        let style = {
            width: WIDTH_IN_PERCENT_OF_PARENT + '%',
            'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

            height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
            'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
        };
        if (Object.keys(this.style).length > 0) {
            style = { ...style, ...this.style };
        }
        let gd3 = d3
            .select(`#chart${this.id}`)
            .append('div')
            .style(style);
        this._container = gd3.node();

        /**
         * On the first run, plot the graph after view has been initialized('div' exists)
         * After that, all subsequent plot changes should be handled by OnChanges hook
         */
        this.update();
        this.viewInitialized = true;
    }

    ngOnChanges() {
        if (this.viewInitialized) {
            this.update();
        }
    }

    update() {
        /**
         * Plot the graph outside change detection
         * TODO :: Investigate bubbling up chart events for future scaling
         * TODO :: Try adding animations on update...
         */
        let self = this;
        this.zone.runOutsideAngular(() => {
            self.appendCustomExport();
            Plotly.newPlot(
                self._container,
                self.data,
                self.layout,
                self.options
            );
        });
    }
}

Данные динамические c и p ie могут содержать один или несколько разделов

Другой случай

введите описание изображения здесь