Height, Width and Padding are going nutz!

[vbenavidesa]

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

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

So ngx-charts is great to use most of the time. my request goes to get a variable to set the height and width independently, I am having a lot of issues on getting the tables to display properly with the automatic solution you have, as my container is dynamic on height it goes to 0 when I insert the chart only, so I have to manually set a height which then goes nutz with the charts axis labels. Another big issues is padding, I saw #225 but if I put another div inside my html it makes the chart HUGE! and doesnt work as a workaround, I use INSPINA dashboard SPA which has some small white boxes called ibox that holds stuff like widgets but the chart goes insane inside it.

So basically I would love 2 features:

• independent height and width variables.
• padding option.

[marjan-georgiev]

I'm not sure what you mean by padding option? The just simply expands to fill the size of it's parent container. The parent container should have a height already set, and no padding.

[vbenavidesa]

Hi marjan,

Widgster actually has no height set and it adapts to the information you place inside. That is why I was wondering if you will implement an independent width and height feature.

On the padding option, the graphic just gets to the very edge of the widget and the legend sticks out just a bit. if you have an email I can provide some screenshots.

[marjan-georgiev]

You could try wrapping the chart in a div which does not have any padding. The div will also need to have its height set, otherwise the auto size will not work.

[alex88]

In my case, having set [view]="[100,100]" doesn't set the chart to be 100x100 but just the container and the graph has quite some padding

is there a way to not have that padding? At the end the g element that contains the graph is 60x60, which wastes 40% of the space

[dezudas]

@alex88 I had similar issue, I am getting extra space in bar and pie chart which is killing space of my container.

[iliyaisd]

+1 to the request, having the same issue. Struggled with Pie Grid and finally just had to copy/paste and redefine it in a separate component, changing the following things:

• set margin = [0, 0, 0, 0]; (not customizable). Same thing for baselineLabelHeight and padding in getSeries().
• set dy="0" to the text in the svg (absence of label is not customizable)
• remove the part of svg regarding total that I don't need (absence is not customizable).

It would be nice to have those things customizable with inputs. Thank you for a nice library!

@marjan-georgiev

[mnasyrov]

I'm using a following workaround for ngx-chart v7.4 that sets chart's margins in ngAfterViewInit:

import {PieChartComponent} from '@swimlane/ngx-charts';

@Component()
export class MyPage {
    @ViewChild(PieChartComponent) pieChart: PieChartComponent;

    ngAfterViewInit() {
        setTimeout(() => {
            this.pieChart.margin = [0, 0, 0, 0];
            this.pieChart.update();
        }, 0);
    }
}

[soothran]

I'm getting the following error. cannot set property 'margin' of undefined.

I've included the above code snippet in my component.

@mnasyrov could you please elaborate your code implementation? Thanks

[soothran]

I got this working by increasing timout

[mnasyrov]

I made another workaround by using a directive which can do the same without timeouts.

import {Directive, Self} from '@angular/core';
import {PieChartComponent} from '@swimlane/ngx-charts';

@Directive({
    selector: 'ngx-charts-pie-chart[hotfix-zero-margin]'
})
export class NgxPieChartZeroMarginDirective {
    constructor(@Self() pieChart: PieChartComponent) {
        pieChart.margin = [0, 0, 0, 0];
    }
}

[furevor]

I made another workaround by using a directive which can do the same without timeouts.

import {Directive, Self} from '@angular/core';
import {PieChartComponent} from '@swimlane/ngx-charts';

@Directive({
    selector: 'ngx-charts-pie-chart[hotfix-zero-margin]'
})
export class NgxPieChartZeroMarginDirective {
    constructor(@Self() pieChart: PieChartComponent) {
        pieChart.margin = [0, 0, 0, 0];
    }
}

Hello! Thank you for this workaround, but it looks like that now it doesn't work. Maybe any other ideas?

P.S. I am talking about BarVerticalComponent

P.P.S. I am sorry, this workaround should work for pie chart, but not for bar chart..

[AaronLavers]

I made another workaround by using a directive which can do the same without timeouts.

import {Directive, Self} from '@angular/core';
import {PieChartComponent} from '@swimlane/ngx-charts';

@Directive({
    selector: 'ngx-charts-pie-chart[hotfix-zero-margin]'
})
export class NgxPieChartZeroMarginDirective {
    constructor(@Self() pieChart: PieChartComponent) {
        pieChart.margin = [0, 0, 0, 0];
    }
}

I've just tried to implement this directive in ngx-charts 12.0.1, and for anyone else trying you need to make a small change to 'margin', instead making it 'margins'

pieChart.margins = [0, 0, 0, 0];

This seems to work quite well. It would be really good if the Swimlane team could implement the margins as an input however.