How can I make my ngx-line-chart responsive?

Question

I'm using ngx-admin and I'm trying to make my ngx-line-chart responsive.

My chart is in a nb-card, and when I resize the window the nb-card is totaly responsive. So I want my chart to be resized to fit inside the nb-card.

My html code:

<div style="margin: 100px auto auto">
    <nb-card>
        <nb-card-header>XXXXXXXXXX</nb-card-header>
            <nb-card-body>
                <ngx-line-chart></ngx-line-chart>
            </nb-card-body>
    </nb-card>
</div>

my component:

import { Component } from '@angular/core';

@Component({
    selector: 'ngx-line-chart',
    template: `
    <ngx-charts-line-chart
      [scheme]="colorScheme"
      [results]="multi"
      [xAxis]="showXAxis"
      [yAxis]="showYAxis"
      [showXAxisLabel]="showXAxisLabel"
      [showYAxisLabel]="showYAxisLabel"
      [xAxisLabel]="xAxisLabel"
      [yAxisLabel]="yAxisLabel">
    </ngx-charts-line-chart>
  `,
})
export class LineChartComponent {
    showXAxis = true;
    showYAxis = true;
    showXAxisLabel = true;
    xAxisLabel = 'Date';
    showYAxisLabel = true;
    yAxisLabel = 'Services effectués';
    colorScheme = {
        domain: ['blue'],
    };
    themeSubscription: any;
    multi = [
        {
            name: 'Services effectués',
            series: [
                {
                    name: '01/01/2019',
                    value: 156,
                },
                {
                    name: '02/01/2019',
                    value: 134,
                },
                {
                    name: '03/01/2019',
                    value: 140,
                },
                {
                    name: '04/01/2019',
                    value: 167,
                },
                {
                    name: '05/01/2019',
                    value: 158,
                },
                {
                    name: '06/01/2019',
                    value: 178,
                },
                {
                    name: '07/01/2019',
                    value: 310,
                },
            ],
        },
    ];

    constructor() {
    }
}

I already try to get the screen size to change my chart size with the screen size but it wasn't perfectly responsive. To change the size of the chart I can use a variable view=[x, y]. I read in the ngx-line-chart documentation that if no size is defined the chart fit to his container, but in my case it doesn't work.

Thank you for your help !

Answer 1

After some research I found the solution to my problem.

1) To change the chart size when the window is resized:

To change the chart's size I used a "onResize(event)" method. This method take in parameter the window resize event. In this method I simply get the width of the window, I divide it by a ratio (in my case it's 1.35) and I assign it to the width of my chart.

onResize(event) method:

// view is the variable used to change the chart size (Ex: view = [width, height])

onResize(event) {
    this.view = [event.target.innerWidth / 1.35, 400];
}

My html template:

<ngx-charts-line-chart
  (window:resize)="onResize($event)"
  [scheme]="colorScheme"
  [results]="multi"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  [view]="view">
</ngx-charts-line-chart>

2) To change the chart size on different device:

To change the chart's size on different device I have to define the size of the chart into the constructor. I get the window size and like for "window resize" i divide it by a ratio and i assign it to "view".

My constructor:

constructor() {
    this.view = [innerWidth / 1.3, 400];
}

This answer work for me. I hope it will help you.