Comments (43)
I will release Highstocks and Highmaps support with the release of angular 4.
from angular-highcharts.
thanks!
from angular-highcharts.
@epot Just follow the instructions in the readme, but notice the following:
-
Make sure the factory function and service call is in the main app.module.ts.
-
In the return array of the factory function, the structure is (if for example you want to use highstock)
return [exporting, highstock]
importing 'exporting' and the other modules is done by
import <module_name> from 'highcharts/modules/<module_name>.src.js'
- notice that you may need to use '.js' after source.
Then lastly, you have to import ChartModule in the module where you want to use the charts (and selected modules).
my app.module.ts:
import { HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import highstock from 'highcharts/modules/stock.src.js';
...
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: highchartsModules
},
],
...
<beneath module declaration>
export function highchartsModules() {
return [exporting, highstock];
}
from angular-highcharts.
This should help you with the exporting module:
https://github.com/cebor/angular-highcharts#using-highcharts-modules
Highstocks is unfortunately not available yet.
from angular-highcharts.
When will Highstocks be available for ang 4.0.x?
from angular-highcharts.
By when can we expect the support for Highstocks and Highmaps?
from angular-highcharts.
Hi all, im very busy atm, but i will inform you here when its done.
What you can do for now is, to extend the Highcharts module: https://github.com/cebor/angular-highcharts#using-highcharts-modules
import { Highcharts } from 'angular-highcharts';
require('highcharts/highstock')(Highcharts);
from angular-highcharts.
How to use Exporting in Anuglar4
from angular-highcharts.
import { Highcharts } from 'angular-highcharts';
require('highcharts/modules/exporting')(Highcharts);
from angular-highcharts.
I seen that But Can I use it like this in Component.. Where I can add this in AngularCLI version
from angular-highcharts.
main.ts should work.
from angular-highcharts.
Trying the same here.
I don't get it ... should this 2 lines:
import { Highcharts } from 'angular-highcharts';
require('highcharts/highstock')(Highcharts);
be somewhere in app.module.ts?
An example would be great where and how exactly to put those values and how to use them in the component
from angular-highcharts.
Yes app.module.ts is a great place to put these lines.
But Highstocks is not fully supported jet.
from angular-highcharts.
I'm doing it that way to use highchart, i've tried Highstocks, work for me! Before it is available for ang 4.0.x, hope that'll be help.
from angular-highcharts.
@Hulva Good Catch, i will do some tests, an update the readme accordingly.
from angular-highcharts.
Seems that @types/highcharts
have no definitions for modules besides highcharts-more.
from angular-highcharts.
Using the src files directly should work without typings or declarations:
Example:
import { Highcharts } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
exporting(Highcharts)
from angular-highcharts.
Just out of curiosity, is the Hightstocks availability is planned in the near future? I am anxious to play with it :).
from angular-highcharts.
Initial Highstock & Highmaps support landed in 5.1.0
https://github.com/cebor/angular-highcharts#highstock--highmaps-support
from angular-highcharts.
I currently get an error while trying to use highstock. The module is as follows:
import { NgModule } from '@angular/core';
import { UiModule } from '../ui.module';
import { SingleSensorChartHComponent } from './single-sensor-chart-H.component';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as highStock from 'highcharts/highstock';
@NgModule({
imports: [
UiModule,
ChartModule,
],
declarations: [
SingleSensorChartHComponent
],
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: highchartsModules
},
],
exports: [
SingleSensorChartHComponent,
ChartModule
]
})
export class MeteoChartsModule {
}
export function highchartsModules() {
return [ highStock ];
}
The console says:
TypeError: module is not a function at eval (webpack-internal:///../../../../angular-highcharts/angular-highcharts.es5.js:248) at Array.forEach (<anonymous>) at ChartService.initModules (webpack-internal:///../../../../angular-highcharts/angular-highcharts.es5.js:247) at new ChartModule (webpack-internal:///../../../../angular-highcharts/angular-highcharts.es5.js:277) at _createClass (webpack-internal:///../../../core/esm5/core.js:10817) at _createProviderInstance$1 (webpack-internal:///../../../core/esm5/core.js:10791) at initNgModule (webpack-internal:///../../../core/esm5/core.js:10744) at new NgModuleRef_ (webpack-internal:///../../../core/esm5/core.js:11987) at createNgModuleRef (webpack-internal:///../../../core/esm5/core.js:11977) at Object.debugCreateNgModuleRef [as createNgModuleRef] (webpack-internal:///../../../core/esm5/core.js:14287)
from angular-highcharts.
import highstock from 'highcharts/modules/stock.src'
this should work.
from angular-highcharts.
@cebor Somehow it cant find the stock.src file. I instal;led highcharts trough npm.
from angular-highcharts.
highcharts version ?
from angular-highcharts.
@cebor nvm, I was stupid. Forgot the .src.js. Thanks man for your hard work! The library is easy enough to understand :D
from angular-highcharts.
@cebor somehow its still not working. The call new StockChart({}) initializes an object with only options in it. chart.ref returns undefined. Copying and pasting the single line demo fro m the website gives me an error about 'cannot call normalize from undefined'. This means that the chart object is somehow not properly initialized when new StockChat is called.
If I add the series attribute, it gets undefined somehow. before that, everything gets shown (white panel with greyed out options)
from angular-highcharts.
This is the module right now.
import { NgModule } from '@angular/core';
import { UiModule } from '../ui.module';
import { SingleSensorChartHComponent } from './single-sensor-chart-H.component';
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src'
import highstock from 'highcharts/modules/stock.src'
@NgModule({
imports: [
UiModule,
ChartModule,
],
declarations: [
SingleSensorChartHComponent
],
providers: [
{
provide: HIGHCHARTS_MODULES,
useFactory: highchartsModules
},
],
exports: [
SingleSensorChartHComponent,
ChartModule
]
})
export class MeteoChartsModule {
}
export function highchartsModules() {
return [ exporting, highstock ];
}
from angular-highcharts.
@Moepkid In which livecycle do you access chart.ref
?
Cause its only available after ngAfterViewInit()
.
See: https://angular.io/guide/lifecycle-hooks
from angular-highcharts.
@cebor I Think i found it. Maybe it is worth noting that the factory function and provider needs to be in the app.module and not a submodule. I now put that in app.module and the rest in the MeteoModule and it works!
Also, Sorry if i screw up the formatting of the comments and code. Somehow the comment box can't translate my code to github code.
from angular-highcharts.
Is there a working example with Highstock? Somehow I am getting similar issues than here, I must be missing something.
from angular-highcharts.
Oh I did not see the .js in the readme, that must be the problem! And I was putting the highchartsModule before the module declaration. Thanks!
Unfortunately, it still does not work. Here's my app-module.ts:
import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import exporting from 'highcharts/modules/exporting.src.js';
import highstock from 'highcharts/modules/stock.src.js';
...
@NgModule({
imports: [
...
ChartModule,
],
declarations: [
...
],
providers: [
...
{ provide: HIGHCHARTS_MODULES, useFactory: highchartsModules }, // add as factory to your providers,
],
bootstrap: [AppComponent]
})
export class AppModule { }
export function highchartsModules() {
// apply Highstock Modules to this array
return [ exporting, highstock ];
}
And I am getting this:
zone.js:654 Unhandled Promise rejection: module is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: module is not a function
at angular-highcharts.es5.js:237
at Array.forEach (<anonymous>)
at ChartService.initModules (angular-highcharts.es5.js:236)
at new ChartModule (angular-highcharts.es5.js:266)
at _createClass (core.js:10622)
at _createProviderInstance$1 (core.js:10596)
at initNgModule (core.js:10549)
at new NgModuleRef_ (core.js:11792)
at createNgModuleRef (core.js:11782)
from angular-highcharts.
@epot which versions are you using for angular and the other librarieS?
from angular-highcharts.
Angular 5.0.2, types/highcharts 5.0.12 and angular-highcharts 5.1.1.
from angular-highcharts.
@epot I think this is something specific for your project. Can you perhaps make a new empty project with only these libraries?
from angular-highcharts.
Working Example: https://stackblitz.com/edit/angular-uzdc1r
from angular-highcharts.
Excellent, thank you both for your help!
from angular-highcharts.
It seems to be related to webpack. I tried the following:
git clone https://github.com/preboot/angular-webpack.git my-app
Tune the my-app/package.json to update angular 5 and add highcharts 6.0.2 and angular-highchart 5.1.1.
Remove the my-app/app/ content and put instead the code from the working example above. And I get the same error as in my app:
(unknown) Unhandled Promise rejection: module is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: module is not a function
at eval (eval at 85 (app.js:63), <anonymous>:249:13)
at Array.forEach (<anonymous>)
at ChartService.initModules (eval at 85 (app.js:63), <anonymous>:248:22)
from angular-highcharts.
@epot angular-cli also uses webpack, an this works fine for me.
https://github.com/cebor/angular-highcharts-demo
from angular-highcharts.
@epot i think i got it. I accidently used module
as a variable which is a keyword in nodejs.
Can you try version 5.1.2
?
from angular-highcharts.
It looks like I got a different error now:
zone.js?fad3:690 Unhandled Promise rejection: element is not a function ; Zone: <root> ; Task: Promise.then ; Value: TypeError: element is not a function
at eval (eval at 85 (app.js:63),
Is element a nodejs keyword as well? I suggest switching to "gnagna" ;-).
from angular-highcharts.
nope it isn't
from angular-highcharts.
Weird, any idea why it is still failing then? I can put a small repro on github if that helps.
from angular-highcharts.
@epot In this case element
should be the reference to the Highcharts Module you are loading.
Maybe the import is incorrect or the angular starter you are using is incompatible with this library.
from angular-highcharts.
I am really not sure what is wrong, but I tested both with my complex project and a start project (https://github.com/preboot/angular-webpack.git) and I am getting the same error unfortunately :-/.
And both were working fine before the update.
from angular-highcharts.
Related Issues (20)
- Thanks everyone and wish you all the best for the holiday season. HOT 1
- StockChart doesn't contain getSVG() method HOT 6
- CommonJS or AMD dependencies Warning HOT 1
- Cannot read property 'showLoading' of undefined
- activate plugin
- angular 13 incompatible HOT 1
- Is it possible to toggle full screen using a separate button. I am using Stock Chart?
- How to resize stock chart HOT 1
- Angular Server-side rendering (SSR) - issue
- Pie chart in lower to higher all datalabels not displayed in chart view (Opera, QQ, Other) datalable not available
- Cannot read properties of undefined (reading 'forExport')
- How it differs from highcharts-angular?
- Angular 15 incompatibility HOT 1
- Update flag adds new legend elements
- No peer dependency mentioning highcharts
- Angular 16 Compatibility - Error HOT 7
- Support for Angular v17 HOT 3
- [Bug] HighchartsGantt class HOT 1
- Add support ESbuild imports HOT 4
- ref$ not supported ? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from angular-highcharts.