Ngx-charts: Stacked Vertical Bar Chart with no/empty view property overflows parent container (bootstrap card)

[TENDesign]

I'm submitting a ...

[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior
Stacked Vertical Bar Chart with no/empty view property overflows parent container (bootstrap card)

Expected behavior
Chart should fit within parent container

Reproduction of the problem

import { Component, OnInit } from '@angular/core';
import {single, multi} from './data';

@Component({
  selector: 'app-pitching-volume',
  templateUrl: './pitching-volume.component.html'
})

export class PitchingVolumeComponent implements OnInit {

    single: any[];
    multi: any[];

    // options
    barPadding = 20;
    colorScheme = {
        domain: ['#3f89de', '#5fc4d6', '#7067e6']
    };
    showXAxis = true;
    showYAxis = true;

    constructor() {
        Object.assign(this, {single, multi});
    }

    ngOnInit() {
        console.log('init');
    }

    onSelect(event) {
        console.log(event);
    }

}

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

Please tell us about your environment:
Visual Studio Code

• ngx-charts version: 7.0.1
• Angular version: 5.0
• Browser: [all]
• Language: [all]

[marjan-georgiev]

Do you have padding on .card-body?

If so, you can add another div in between that and the chart, like this:

<div class="card-body">
  <div style="width: 100%; height: 100%;">
    <ngx-charts-bar-vertical-stacked
        [barPadding]="barPadding"
        [results]="multi"
        [scheme]="colorScheme"
        [xAxis]="showXAxis"
        [yAxis]="showYAxis"
        (select)="onSelect($event)">
    </ngx-charts-bar-vertical-stacked>
  </div>
</div>

The chart measures the dimensions of its immediate parent container, and it does not subtract any padding from it.

[TENDesign]

<div class="card">
    <div class="card-header">
        <p class="text-primary"><strong>Pitching volume & effectiveness</strong></p>
    </div>
    <div class="card-body">
        <div class="chart-container" width="100%" height="100%">
            <ngx-charts-bar-vertical-stacked
                [barPadding]="barPadding"
                [results]="multi"
                [scheme]="colorScheme"
                [xAxis]="showXAxis"
                [yAxis]="showYAxis"
                (select)="onSelect($event)">
            </ngx-charts-bar-vertical-stacked>
        </div>
    </div>
</div>

this is producing two results

1. Full screen:
   

1. Small screen:
   

[marjan-georgiev]

Can you create a stackblitz or a plunkrs where this can be reproduced, please? If so I would be happy to take a further look.

[TENDesign]

Wow, never used stackblitz before, but i love it! https://stackblitz.com/edit/angular-gl3d1x

[marjan-georgiev]

Here it is fixed: https://stackblitz.com/edit/angular-u6endj?file=app/pitching.component.html

I assumed that your container has a height already set. The parent container must have a width and height bigger than 0 when empty, otherwise when the chart measures it and sees 0, it sets default dimensions, which is what happened here.

[TENDesign]

Thanks @marjan-georgiev

It also appears that the style needs to be inlined. When I add the width: 100%; height: 300px; to the style sheet it does not render correctly.

[marjan-georgiev]

You're welcome!
That shouldn't be the case. Make sure your styles are properly loaded and applied to the element.