Highcharts: Modulize Highchart? Tree shaking capability.

Hi @envil,
At the begining I advise you to load only highstock.js which includes all Highcharts' features. You can also build your custom file by our tool here:

• https://www.highcharts.com/download

Highcharts lib is already modularized: https://www.highcharts.com/docs/getting-started/how-to-create-custom-highcharts-files

Thank you for your responses.
I'm looking at the custom build feature. It gives me a highchart-custom.src.jswhich is not convenient to use at all since it's not a node_modules, so I cannot import it to my Angular application in a regular way. And all the type definitions for the typescript are gone.

Also what I mean is ES module, completely independent and can be imported to other ES modules. See how lodash and date-fns have defeated underscore and momentjs, one of the most important factor is the modularization capability like this.

@jon-a-nygaard FYI

I am running into this as well.
I tried to go around with import * as Highstock from 'highcharts/highstock'; but it has no effect whatsoever.

Hi, a while back we started publishing our parts files as ES modules which means you can do import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js'. This may help some on the issue.

We are also currently working on making these parts files more standalone, which should improve tree shaking capabilities. It is a bit difficult at the moment to give a good ETA for when this will be published, but I will keep you updated as soon as I know some more.

hi,

i'm using only 'stockChart' type and ran into the same problem, but found a solution described here :
https://github.com/highcharts/highcharts-angular#core

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

instead of :
import * as Highcharts from 'highcharts/highstock';

now in bundle, its look like this :

I'm using highcharts-react which uses the import * syntax. I'm not giving up yet but i've been unable to get tree shaking working for it so far.

https://github.com/highcharts/highcharts-react/blob/08cd61ca178276d716ae65fba76e1d07924b2838/src/HighchartsReact.d.ts#L6

My current workaround : Alias Highcharts module into Highstock module.

You can use both chart type (Highcharts/Highstock) and it lower bundle size 🥇 .

This can be done with Webpack (check "resolve.alias" in Webpack documentation for more information) :

    alias: {
      highcharts$: 'highcharts/highstock.js',
    }

You can do aliasing with Babel to (babel-plugin-module-resolver).

Would be nice if we can modularize the whole lib.

Note that Highstock can be loaded as a module to Highcharts, using modules/stock.js module. Like mentioned above:

import * as Highcharts from 'highcharts';
import Stock from 'highcharts/modules/stock';
Stock(Highcharts);

@pawelfus Somehow that fails in my tests with: TypeError: Highcharts.stockChart is not a function

No type issues though and the application itself works too. I'm using jest. Any idea?

UPDATE
Found out that resolving the module differently in jest.config.js works:

  moduleNameMapper: {
    '^highcharts$': '<rootDir>/node_modules/highcharts/highstock'
  },

Any update on this ? Considering dropping Highcharts since it's really a HUGE library to import into my project :(

Hi @Yohandah! We are about half way through, as you can see in https://github.com/highcharts/highcharts/issues/12738.

You can use most ES modules to tree shake. Though this is for the moment not officially supported (only masters), because we are moving and splitting files right now. So with the next release, paths in the example will be different.

import Chart from 'https://code.highcharts.com/es-modules/parts/Chart.js'
import SVGRenderer from 'https://code.highcharts.com/es-modules/parts/SVGRenderer.js'
new Chart('container', { /* ...options... */ });

https://jsfiddle.net/xtof0m14/