Angular5 - Responsive Highcharts with configuration is not working - highcharts

Question

I am trying to have responsive Highcharts with Angular5 using responsive configuration from https://www.highcharts.com/docs/chart-concepts/responsive like this:
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
}
I am using angular-highcharts library for doing this along with typescript.
Below is my code with the responsive configuration exactly as mentioned on Highcharts website:
import {Component, OnInit} from '#angular/core';
import {Chart} from 'angular-highcharts';
import * as Highcharts from 'highcharts';
#Component({
selector: 'historical-health-data',
templateUrl: './historical-health-data.component.html',
styleUrls: ['./historical-health-data.component.less']
})
export class HistoricalHealthDataComponent {
chart: Chart;
ngOnInit() {
this.chart = new Chart({
chart: {
type: 'column',
height: this.height,
style: {fontFamily: 'inherit'}
},
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
lang: {
noData: null
},
plotOptions: {
series: {
animation: true,
connectNulls: true,
marker: {
symbol: 'circle',
lineWidth: 1,
lineColor: '#fff'
}
},
column: {
states: {
hover: {
enabled: false
}
},
pointPadding: 0,
borderWidth: 0.1,
pointWidth: 20,
dataLabels: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
rotation: -60
}
},
yAxis: {
min: 0,
title: {
text: null
}
},
series: [{
data: [{
x: Date.UTC(2012, 0, 1),
y: 1
}, {
x: Date.UTC(2012, 0, 8),
y: 3
}, {
x: Date.UTC(2012, 0, 15),
y: 2
}, {
x: Date.UTC(2012, 0, 22),
y: 4
}],
pointRange: 24 * 3600 * 1000
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
}
});
});
}
}
historical-health-data.component.html:
<div [chart]="chart"></div>
By adding the responsive configuration exactly as mentioned in Highcharts documentation : https://www.highcharts.com/demo/responsive i am getting the following error:
error TS2345: Argument of type '{ chart: { type: string; height: number; style: { fo
ntFamily: string; }; events: { click: () => v...' is not assignable to parameter of type 'Options'.
Types of property 'responsive' are incompatible.
Type '{ rules: { condition: { maxWidth: number; }; chartOptions: { legend: { enabled: boolean; }; }; }[...' is not assignable to type 'ResponsiveOptions[]'.
Object literal may only specify known properties, and 'rules' does not exist in type 'ResponsiveOptions[]'.
What am i doing wrong here ? Is there a better way to achieve responsive charts ?
I am aware that a chart has to be by default responsive but in my case this is how the x-axis is behaving when the browser is minimized to < 700px :
The x-axis is expanding and going underneath the next panel on the page.
This is how it has to be or similar to:

Answer 1

I faced same issue and This is my solution and hope it will help to anyone.
It may have performance issue on large data set.
ngOnInit() {
this.innerWidth = window.innerWidth;
this.chartOptions = {
chart: {
type: 'line',
height: 120,
width: this.innerWidth - 50
},.....
};
this.chart = new Chart(this.chartOptions);
}
Direct screen change and redrew it.
#HostListener('window:resize', ['$event'])
onResize(event) {
this.innerWidth = window.innerWidth;
this.chartOptions.chart.width = this.innerWidth - 50;
this.chart = new Chart(this.chartOptions);
}

Answer 2

Using BreakpointObserver fixed my issue, the other little change i have done is to use chartConfig to build the config first using highcharts Options and then bind the data to the Chart object. This way i can always reload config whenever i need to redraw the chart. Here is the complete code:
import {Component, OnInit} from '#angular/core';
import {Chart} from 'angular-highcharts';
import * as Highcharts from 'highcharts';
import {Options} from 'highcharts/highstock';
import {BreakpointObserver} from '#angular/cdk/layout';
#Component({
selector: 'historical-health-data',
templateUrl: './historical-health-data.component.html',
styleUrls: ['./historical-health-data.component.less']
})
export class HistoricalHealthDataComponent {
chart: Chart;
chartConfig: Options;
constructor(private bm: BreakpointObserver) {
super();
}
media() {
// responsive chart
this.mediaSubscription = this.bm.observe('(max-width: 1200px)').subscribe(result => {
//change these values to your desired values as per requirement
const height = result.matches ? 190 : 300;
if (!this.height) {
// initial display
this.height = height;
this.load();
} else if (this.height !== height && this.chart && this.chart.ref) {
// redraw
this.height = height;
this.chartConfig.chart.height = this.height;
this.chart = new Chart(this.chartConfig);
} else {
// do nothing
}
});
}
ngOnInit() {
this.media();
this.chartConfig = {
chart: {
type: 'column',
height: this.height,
style: {fontFamily: 'inherit'}
},
title: {
text: null
},
exporting: {
enabled: false
},
legend: {
enabled: false
},
credits: {
enabled: false
},
lang: {
noData: null
},
plotOptions: {
series: {
animation: true,
connectNulls: true,
marker: {
symbol: 'circle',
lineWidth: 1,
lineColor: '#fff'
}
},
column: {
states: {
hover: {
enabled: false
}
},
pointPadding: 0,
borderWidth: 0.1,
pointWidth: 20,
dataLabels: {
enabled: false
}
}
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
rotation: -60
}
},
yAxis: {
min: 0,
title: {
text: null
}
},
series: [],
};
//assign/bind the data here after the config is initialized
this.chartConfig.series = [{
data: [{
x: Date.UTC(2012, 0, 1),
y: 1
}, {
x: Date.UTC(2012, 0, 8),
y: 3
}, {
x: Date.UTC(2012, 0, 15),
y: 2
}, {
x: Date.UTC(2012, 0, 22),
y: 4
}],
pointRange: 24 * 3600 * 1000
}];
//finally create the Chart object here with the config
this.chart = new Chart(this.chartConfig);
});
}
}