Is angular2-highcharts supported in Angular 11?

Viewed 163

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

1 Answers

highcharts-angular is the official Highcharts wrapper for Angular so It would be a good long term investement for you to switch from angular2-highcharts to highcharts-angular.

You can clearly see from the npm download stats that highcharts-angular is more popular (55k weekly downloads vs 5k weekly downloads )

And it cleary says in the github repo Not supported anymore. Consider using the offical Highcharts wrapper for Angular

Related