I am trying to plot wind barb using my angular application. I used angular-highchart package but it's showing me below error -
Error: Highcharts error #17: www.highcharts.com/errors/17
import { Component } from '#angular/core';
import { Chart } from 'angular-highcharts';
import { MapChart } from 'angular-highcharts';
#Component({
selector: 'app-root',
template: `
<div [chart]="chart"></div>
`
})
export class AppComponent {
chart = new Chart({
title : { text : 'simple chart' },
xAxis: {
type: 'datetime',
offset: 40
},
series: [{
type: 'windbarb',
name:"Wind Direction",
data: [
[9.8, 177.9],
[10.1, 177.2]
]
}, {
type: 'area',
name:'WindSpeed',
data: [
[9.8, 177.9],
[10.1, 177.2]
],
}]
});
constructor() {
}
}
here
Check module.ts imports as per angular-highcharts docs
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src';
import windbarb from 'highcharts/modules/windbarb.src';
export function highchartsModules() {
// apply Highcharts Modules to this array
return [ exporting,windbarb ];
}
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
#NgModule({
imports: [ BrowserModule, FormsModule,ChartModule ],
declarations: [ AppComponent, HelloComponent ],
providers: [
{ provide: HIGHCHARTS_MODULES, useFactory: highchartsModules } // add as factory to your providers
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Stackblitz demo
I have created a chart module using Angular2-highcharts but when I try to run the application I am getting the followoing error.
ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'options' since it isn't a known property of 'chart'. ("
<!-- <p text-center>Kye Info Page under construction</p> -->
<chart [ERROR ->][options]="chartOptions" type="chart"></chart>
</ion-content>
"): ng:///KeyinfoPageModule/KeyinfoPage.html#27:9
'chart' is not a known element:
1. If 'chart' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component. ("
<ion-content>
Code
1. app.module.ts
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'Highcharts';
imports: [
---------
ChartModule.forRoot(highcharts)
],
2. html File
<ion-content>
<chart [options]="chartOptions" type="chart"></chart>
</ion-content>
3. .ts file
export class KeyinfoPage {
chartOptions:any;
constructor(public navCtrl: NavController) {
}
ionViewDidLoad() {
this.chartOptions={chart: {
type: 'area'
},
title: {
text: 'US and USSR nuclear stockpiles'
},
subtitle: {
text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">' +
'thebulletin.metapress.com</a>'
},
xAxis: {
allowDecimals: false,
labels: {
formatter: function () {
return this.value; // clean, unformatted number for year
}
}
},
yAxis: {
title: {
text: 'Nuclear weapon states'
},
labels: {
formatter: function () {
return this.value / 1000 + 'k';
}
}
},
tooltip: {
pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
},
plotOptions: {
area: {
pointStart: 1940,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: [{
name: 'USA',
data: [null, null, null, null, null, 6, 11, 32, 110, 235, 369, 640,
1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104]
}, {
name: 'USSR/Russia',
data: [null, null, null, null, null, null, null, null, null, null,
5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
21000, 20000, 19000, 18000, 18000, 17000, 16000]
}]
}
console.log('ionViewDidLoad KeyinfoPage');
}
viewDashboard(){
this.navCtrl.setRoot('DashboardPage')
}
}
Please help me to solve this issue. I have found several questions like this but none of them helped me to solve this error. I am following this video to create the charts
https://www.youtube.com/watch?v=FSg8n5_uaWs&index=2&list=LLTJRcsGtG-ZMAf9dklVIikA&t=610s
keyinfo.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { KeyinfoPage } from './keyinfo';
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
#NgModule({
declarations: [
KeyinfoPage,
],
imports: [
IonicPageModule.forChild(KeyinfoPage),
ChartModule
],
})
export class KeyinfoPageModule {}
You can set import the HighChartsModule in the IonicPageModule in which it is used instead of the app.module.ts
import { ChartModule } from 'angular2-highcharts';
import * as highcharts from 'highcharts';
#NgModule({
declarations: [
KeyinfoPage,
],
imports: [
IonicPageModule.forChild(KeyinfoPage),
ChartModule.forRoot(highcharts)
],
})
export class KeyinfoPageModule {}
I'm using angular 2, firebase and ng2-highcharts.
I assign data after I receive them from firebase like so :
this.items = af.database.list('/items');
this.optionsAsync = this.items.map(data => {
this.options.series[0].data = data.map(item => ([item.x, item.y]));
return this.options;
});
Then in my view template I have :
<div [ng2-highcharts]="optionsAsync | async"></div>
This is working fine at first load. But unfortunately when new data are received chart is not updated. Any idea ?
I found a solution by referencing highcharts component with #ViewChild like so :
in component class :
import { ViewChild, Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css'],
directives: [Ng2Highcharts]
})
export class AppComponent {
#ViewChild(Ng2Highcharts)
chartElement: Ng2Highcharts;
private chartData = {
chart: {
zoomType: 'x'
},
colors: ['rgba(255,0,255,1)'],
title: {
text: 'Items'
},
credits: '',
series: [{
type: 'area',
name: 'Items',
data: []
}]
};
chartData$ = new Subject();
ngOnInit() {
this.items.subscribe((data: any) => {
this.chartData.series[0].data = data.map(item => ([item.x, parseFloat(item.y)]) );
this.chartData$.next(this.chartData);
if(this.chartElement && this.chartElement.chart) {
var serieRef = this.chartElement.chart.series[0];
serieRef.setData(this.chartData.series[0].data);
}
});
}
}
I am trying to use ng2-highcharts in my application. But after importing the necessary classes using the statement
import {Ng2Highcharts, Ng2Highmaps, Ng2Highstocks} from 'ng2-highcharts/ng2-highcharts';**
if I try to specify these classes in the array of directives in my component (directives: [Ng2Highcharts]), I am getting the following error in my console.
[TypeError: require is not a function][1]
My System.config looks as follows
System.config
Can someone tell me what I am missing here ?
You need to define 'ng2-highchart' within your SystemJS configuration:
<script>
System.config({
map: {
'ng2-highchart': 'node_modules/ng2-highchart'
},
(...)
});
</script>
See this question for more details:
How to use highcharts with angular 2?
Here is my candlestick sample... see if this helps.
import { Component } from '#angular/core';
import {JSONP_PROVIDERS, Jsonp} from '#angular/http';
import { CHART_DIRECTIVES } from 'angular2-highcharts';
#Component({
selector: 'high-chart',
directives: [CHART_DIRECTIVES],
providers: [JSONP_PROVIDERS],
template: `
<h2> This is HighChart CandleStick component </h2>
<chart type="StockChart" [options]="options3"></chart>
`
})
export class HighChartsComponent {
options3: Object;
constructor(jsonp : Jsonp) {
jsonp.request('https://www.highcharts.com/samples/data/jsonp.php?a=e&filename=aapl-ohlc.json&callback=JSONP_CALLBACK').subscribe(res => {
this.options3 = {
title : { text : 'CandleSticks' },
rangeSelector : {
selected : 1
},
series : [{
type : 'candlestick',
name : 'CandleSticks',
data : res.json(),
dataGrouping : {
units : [
[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]
]
},
tooltip: {
valueDecimals: 2
}
}]
};
});
}
Remove format: 'register' from you packages. This will help it detect the right format. Or you can add the format as follows:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
"node_modules/ng2-highcharts": {
format: 'cjs',
defaultExtension: 'js'
}
},
map: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
},
paths: {
"ng2-highcharts/ng2-highcharts" : "node_modules/ng2-highcharts/ng2-highcharts"
}
});
I created a highstock spline graph with half an hour interval data. The graph displays on "1 month,3 month" selectors, disappear on "all" selector. There are too many data points which could be the problem; but my other hourly dataset has even more data and works just fine.
See all the code in jsFiddle:https://jsfiddle.net/gbr1v9yu/8/
Here is my code for highchart:
$('#chart-A').highcharts('StockChart', {
rangeSelector : {
selected : 0
},
title : {
text : 'Water Level'
},
// xAxis: {
// ordinal: false
// },
yAxis: {
title:{text:'Water Level(m)'},
labels: {
align:'left',
formatter: function () {
return this.value + ' m';
}
}
},
navigator : {
enabled : false
},
colors: ['#0000FF'],
series : [{
type: 'spline',
name : 'Water Level',
data : tsData,
tooltip: {
valueDecimals: 2,
valueSuffix: 'm'
}
}]
});
Can anyone help me out? Thanks a lot.