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 !
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments