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.

Answer 2

I came up with a better & simple solution for this :

componenet.html

<div #containerRef class="card-body">   <ngx-charts-line-chart     [view]="[containerRef.offsetWidth, 400]"     [scheme]="colorScheme"     [legend]="legend"     [showXAxisLabel]="showXAxisLabel"     [showYAxisLabel]="showYAxisLabel"     [xAxis]="xAxis"     [yAxis]="yAxis"     [timeline]="timeline"     [results]="_lineChartData"   >   </ngx-charts-line-chart> </div> 

Makes It responsive as per container's width.

UPDATE

if you want to make it responsive as of container for both height & width :

<div #containerRef class="card-body">  <ngx-charts-line-chart    [view]="[containerRef.offsetWidth, containerRef.offsetHeight]"    [scheme]="colorScheme"    [legend]="legend"    [showXAxisLabel]="showXAxisLabel"    [showYAxisLabel]="showYAxisLabel"    [xAxis]="xAxis"    [yAxis]="yAxis"    [timeline]="timeline"    [results]="_lineChartData"  >  </ngx-charts-line-chart> </div>