NgxCharts resizing on data change

Question

I'm building an app using Swimlane's Ngx Charts for graphical data representation, but I'm getting odd behaviour when I update the data via a refresh button which re-calls a GET function to update the data array. I'm using @angular/flex-layout for a "tile-like" view but even without using it, I'm still encountering this issue - it just grows the parent container. I don't want to use hard-coded px values in the [view] property because I want it to work with any size of graph/tile.

I'm use a pretty basic vertical bar chart:

<div>
    <div>
        <ngx-charts-bar-vertical [results]="dataArray"
                                 [legend]="true"
                                 [xAxis]="true"
                                 [yAxis]="true"
                                 [xAxisLabel]="'Date'"
                                 [yAxisLabel]="'# tickets Raised'"
                                 [showXAxisLabel]="true"
                                 [showYAxisLabel]="true"></ngx-charts-bar-vertical>
    </div>
    <div>
        <!-- Got a table here -->
    </div>
</div>

To update my dataArray I'm doing:

export class DashboardComponent implements AfterViewInit {
    constructor(private httpClient: HttpClient, private datePipe: DatePipe, private dataService: DataService) { }

    dataArray: any[] = [];

    getData(): void {

        this.dataService.getSomeData<any[]>().subscribe(d => {
                this.dataArray = d;
        });
    }

    // Init
    ngAfterViewInit(): void {
        this.getData();
    }
}

On initial load, it's fine and will fill the container (where it can) but when I hit the refresh button this is the behaviour I get:

Thank you for your time.

Issue still exists, may have to use a work around as seen in the answers section. — Sandy B, Nov 16 '20 at 05:30

drinu16 · Answer 1 · 2018-03-23T23:57:13.520

5

We solved it using a div around the chart and using CSS added a height of 40 or 50vh.

The chart no longer changes in height on update.

edited Mar 23 '18 at 23:57

answered Mar 23 '18 at 17:55

drinu16

775
2
11
25

score 1 · Answer 2 · answered Jun 04 '19 at 12:36

The following worked for me:

<div style="max-height: 50vh">
  <ngx-charts-bar-vertical   [results]="dataArray"
                             [legend]="true"
                             [xAxis]="true"
                             [yAxis]="true"
                             [xAxisLabel]="'Date'"
                             [yAxisLabel]="'# tickets Raised'"
                             [showXAxisLabel]="true"
                             [showYAxisLabel]="true"></ngx-charts-bar-vertical>
</div>

Downside on this, is you would need to define a maximum height.

score 0 · Answer 3 · answered Nov 04 '19 at 19:15

Use views

<ngx-charts-bar-vertical [results]="dataArray"
                                 [legend]="true"
                                 [xAxis]="true"
                                 [yAxis]="true"
                                 [xAxisLabel]="'Date'"
                                 [yAxisLabel]="'# tickets Raised'"
                                 [showXAxisLabel]="true"
                                 [showYAxisLabel]="true" [view]="chartSize">
</ngx-charts-bar-vertical>

and in the component define chartSize

chartSize = [770, 450];

score 0 · Answer 4 · answered Nov 27 '19 at 06:39

The attribute view will set the size and stop the change

  <ngx-charts-line-chart
    [results]="sloGraphData"
    [xAxis]="true"
    [yAxis]="true"
    [legend]="true"
    [legendPosition]="'below'"
    [showXAxisLabel]="false"
    [showYAxisLabel]="false"
    [showRefLines]="true"
    [referenceLines]="refLines"
    [xAxisLabel]="'Days required'"
    [yAxisLabel]="'Date'"
    [view]="[360, 300]">
  </ngx-charts-line-chart>

score 0 · Answer 5 · answered Mar 18 '20 at 09:57

0

you trying to modify data is not recognized by change detection.

this.dataArray = d;

instead try spreading data over, that will detect the changes. It worked for me.

this.dataArray = [...d];

answered Mar 18 '20 at 09:57

Thanan_Jaje

109
6

NgxCharts resizing on data change

5 Answers5