I was using https://github.com/gevgeny/angular2-highcharts
npm i angular2-highcharts
It was working perfectly fine till my source code environment was Angular 8 but after upgrading to Angular 11 it is not working as expected. I was getting injector error on HighchartsStatic.
Here is my code snippet:
import { HighchartsStatic } from 'angular2-highcharts/dist/HighchartsService';
export function highchartsFactory() {
const hc = require( 'highcharts/highstock' );
const dd = require( 'highcharts/modules/exporting' );
hc.setOptions( {
lang: {
numericSymbols: [" K", " M", " B", " T", " P", " E"],
thousandsSep: ",",
decimalPoint: ".",
stockTools: {
gui: {
inputText: 'Text annotation from input'
}
},
navigation: {
popup: {
inputText: 'Input text'
}
}
},
tooltip: {
xDateFormat: '%m/%d/%Y',
valueDecimals: 2
},
time: {
timezoneOffset: (new Date()).getTimezoneOffset()
},
global: {
timezoneOffset: (new Date()).getTimezoneOffset()
}
} );
dd( hc );
// const annotations = require('highcharts-annotations/js/annotations');
// annotations(hc);
const ind = require( 'highcharts/indicators/indicators-all' );
ind( hc );
const annotationsAdvanced = require( './highcharts/modules/annotations-advanced.src' );
annotationsAdvanced( hc );
const priceIndicators = require( 'highcharts/modules/price-indicator' );
priceIndicators( hc );
const fullScreen = require( 'highcharts/modules/full-screen' );
fullScreen( hc );
const stockTools = require( 'highcharts/modules/stock-tools' );
stockTools( hc );
const dragPanes = require( 'highcharts/modules/drag-panes' );
dragPanes( hc );
const boost = require( 'highcharts/modules/boost' );
boost( hc );
return hc;
}
And my Ngmodule is:
@NgModule( {
providers: [{
provide: HighchartsStatic,
useFactory: highchartsFactory
}]
})
I browse through many blogs they suggesting to use highcharts-angular but it will be a big change in my project. Is there any way I can use it or fix this issue ?
Also I want to know the Angular support of angular2-highcharts