Highcharts: zero-align y-axes angular 6

Question

I need to implement a chart like in this link: highchart-image

So i found a plugin in highchart, i think is usefull to use it:

http://highchartsweb.vifi.ee/plugin-registry/single/42/Zero-align%20y-axes

I use the file who is responsible for the alignement with name 'tick_positioner.js' and i add it to my angular application.

"scripts": [
              "node_modules/highcharts-zero-align-y-axes/tick_positioner.js"
            ]

I have firstable this error

tick_positioner.js:147 Uncaught ReferenceError: Highcharts is not defined

But highchart is loaded in the application

Answer 1

To create such type of chart, you do not need to use zero-align y-axes plugin:

Highcharts.chart('container', {
    series: [{
        type: 'column',
        data: [2, -3, -5, 1, 6, -2, 11, -9]
    }, {
        type: 'column',
        data: [-2, -3, -5, 1, 6, -2, 11, -9]
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/750bu6a2/

However, to load a plugin in your project, you should import and initialize it like:

import * as Highcharts from 'highcharts';
import * as HC_customEvents from 'highcharts-custom-events';
HC_customEvents(Highcharts);

Docs: https://github.com/highcharts/highcharts-angular/blob/master/README.md