How to apply spacing between chart and the label in ngx line chart

Question

I have been facing an issue where I have X and Y axis label, when ever I zoom in or zoom out a page sometimes the label gets overlapped with the X and Y axis data. Refer the below image for reference .

There is no space between the value and label, kindly help me in increasing the space between the value and label.

<div fxFlex.gt-xs="50%"  [fxFlex.gt-md]="regularDistribution"  *ngFor = "let val of data"   style="text-align:center;font-family: 'Open Sans', sans-serif;padding:10px 10px 10px 10px;">  
    <div #ContainerRef>
            <mat-toolbar  class="NavToolClass" style="height:31.5px;border-radius: 2px;">
                <span> {{val.value}}</span>
            </mat-toolbar>
            <pre></pre>
            <ngx-charts-line-chart style="padding:10px 10px 10px 10px;" (window:resize)="ResizeChart(ContainerRef1.offsetWidth)"  
            [results]="val.key"
            [gradient]="verticalBarOptions.gradient"
          [xAxis]="verticalBarOptions.showXAxis"
          [yAxis]="verticalBarOptions.showYAxis"
          [legend]="false"
          [showXAxisLabel]="verticalBarOptions.showXAxisLabel"
          [showYAxisLabel]="verticalBarOptions.showYAxisLabel"
          [xAxisLabel]="verticalBarOptions.xAxisLabel"
          [yAxisLabel]="verticalBarOptions.yAxisLabel"
          [showGridLines]="verticalBarOptions.showGridLines"
          [legend]="verticalBarOptions.showLegend"
          [yScaleMax]="1200"
          [view]="view">
        </ngx-charts-line-chart>

    <pre></pre>
<pre></pre>    
</div>
</div>


verticalBarOptions = {
showXAxis: true,
showYAxis: true,
gradient: false,
showLegend: false,
showGridLines: true,
showXAxisLabel: true,
xAxisLabel: "Date",
showYAxisLabel: true,
yAxisLabel: "Size (GB)",
animations:true,
barPadding:5,
groupPadding:5

};