score:0
there are two main things that don't work. but before i could explain let's look at the code responsible for creating the chart in the wrapper.
ngonchanges(changes) {
const update = changes.update && changes.update.currentvalue;
if (changes.options || update) {
this.wrappedupdateorcreatechart();
if (update) {
this.updatechange.emit(false); // clear the flag after update
}
}
}
wrappedupdateorcreatechart() {
if (this.runoutsideangular) {
this._zone.runoutsideangular(() => {
this.updateorcreatechart();
});
}
else {
this.updateorcreatechart();
}
}
updateorcreatechart() {
if (this.chart && this.chart.update) {
this.chart.update(this.options, true, this.onetoone || false);
}
else {
this.chart = this.highcharts[this.constructortype || 'chart'](this.el.nativeelement, this.options, this.callbackfunction || null);
// emit chart instance on init
this.chartinstance.emit(this.chart);
}
}
as you can see, everything is happening in the ngonchanges
hook. if the change is detected the series of methods are fired to finally update the chart.
and now the things which don't work:
in the case when there is any asynchronous code happening in the
subscribe
(like for example http request - on my example mocked bysettimeout
) you have to manually set to wrapper that is should be updated by setting theupdateflag
. because angular doesn't detect changes in some properties in thechartoptions
.if you split assigning properties to the
chartoptions
like in the code snippet below set theonetoone
flag totrue
this.chartoptions.xaxis = {
categories: categories
};
this.chartoptions.series = [{
type: "column",
name: "cities",
data: dataseries
}];
docs: https://github.com/highcharts/highcharts-angular#options-details
demo: https://stackblitz.com/edit/highcharts-angular-basic-line-vwrrmx
score:0
there is one thing that isn't necessary inside your code that causes that issue.
you don't have to destroy the chart reference here. when you remove that everything works as expected.
ngondestroy() {
this.chartref.destroy()
}
please also note that creating a second chart inside the subscribe
isn't ideal. insted use updateflag
.
this.highcharts.chart('container', this.chartoptions);
demo: https://stackblitz.com/edit/highcharts-angular-basic-line-nxzqvy
Source: stackoverflow.com
Related Query
- Cannot read property 'forExport' of undefined when leaving the page with Hicharts chart
- Cannot read property 'cum' of undefined -- when creating a stacked area chart with xAxis.type=datetime
- I'm getting this error when fly over the chart: TypeError: Cannot read property 'lineWidth' of undefined
- Uncaught TypeError: Cannot read property '0' of undefined javascript error and with highcharts
- highcharts-angular : Cannot read property 'chart' of undefined
- Uncaught TypeError: Cannot read property 'mouseIsDown' of undefined
- Highcharts: Cannot read property 'parts/Globals.js' of undefined
- Highcharts cannot read property 'series' of undefined
- ERROR TypeError: Cannot read property '0' of undefined in angular-highcharts
- Cannot read property 'addEvent' of undefined
- Uncaught TypeError: Cannot read property 'chart' of undefined in highcharts
- highcharts heatmap Uncaught TypeError: Cannot read property 'prototype' of undefined
- Highcharts: Cannot read property 'chart' of undefined
- Using Highcharts formatter causes Cannot read property 'length' of undefined
- highcharts canvas-tools: Cannot read property 'prototype' of undefined
- Highcharts :Cannot read property 'parentGroup' of undefined with AngularJS
- Cannot read property 'type' of undefined highcharts highstock
- highcharts-ng: Cannot read property 'setExtremes' of undefined
- Uncaught TypeError: Cannot read property 'addPoint' of undefined ( Highstock live data)
- Get TypeError: Cannot read properties of undefined (reading 'forEach') when pass a params
- Uncaught TypeError: Cannot read property 'xAxis' of undefined Highcharts
- highcharts: TypeError: Cannot read property '0' of undefined
- Cannot read property 'info' of undefined
- Highcharts/Highmaps Uncaught TypeError: Cannot read property '0' of undefined error
- Highcharts 5: TypeError: Cannot read property 'chart' of undefined at e.Chart.reflow
- Changing chart type give: Uncaught TypeError: Cannot read property 'length' of undefined Highcharts
- Uncaught TypeError: Cannot read property 'timestamp' of undefined
- Uncaught TypeError: Cannot read property '0' of undefined - highcharts
- When I click on first pie on the page, the second appears, but then I cannot do anything with the first
- HighCharts Sankey + NextJS: TypeError: Cannot read property 'Core/Series/Point.js' of undefined
More Query from same tag
- Set max value of stacked area as y-axis in highcharts
- Dynamically update highcharts via setData for Yii-created Highcharts Widget
- Highchart tooltip value should be format based on locale
- Highcharts: X-axis, plot points and horizontal scrolling
- Negative values in the data not showing in highcharts linechart
- Highcharts context menu button appearing thrice for the same chart
- Is a 1D flag chart possible?
- how to change highstock date to persian date
- Add more charts in angular highcharts
- Highcharts heatmap chart labels render extremely slow
- Deleting last entered comma on PHP code
- how to show mutipal dynamic highcharts based on json data
- Change color of area chart programmatically in highcharts
- Highchart - Show histogram results using waterfall style rendering
- Javascript charting plugin which allows to select a portion of an area graph
- Highcharts not rendering labels from an html table
- Group specific points to categories in Highchart
- Set navigator min zoom
- change vertical lines position in column chart
- Highcharts Grouped Column with Time Series
- Use server-side json with Highchart
- How to replicate what Excel does to plot a "Scatter with smooth lines" graph
- Highcharts pie chart list of selected section
- Highchart js click rotate and expand arc
- How to animate chart legend symbol on hover?
- Highcharts 7 - Center an Annotation
- How to hide only the regressions
- Highchart Json Format for Highchart stock chart
- Charts,Server Side or Client Side?
- HighCharts box-plot: how to make it horizontal