13

I use ES6, Babel and webpack stack.

I have installed highcharts by npm (I prefer to use the official highcharts npm repo):

npm install highcharts-release --save

But, regular import (ES6) doesn't work as expected:

import highcharts from 'highcharts';

How can I import Highcharts via webpack import? Can you post a webpack.config.js example (or other way to config the plugins)?

Thanks.

EDIT

The error is:

Uncaught Error: Cannot find module "highcharts" webpackMissingModule @ review-chart.js:2(anonymous function) ....
Shai M.
  • 1,284
  • 4
  • 17
  • 30
  • *"doesn't work as expected"* What do you expect and what happens? – Felix Kling Oct 20 '15 at 18:51
  • So if the successful import happens, what is the problem? – Felix Kling Oct 20 '15 at 19:21
  • 1
    I meant that I expect a successful import, but the import fail and I get an exception – Shai M. Oct 20 '15 at 19:32
  • Do you want to tell us what the exception is or do you want us to guess? The exception message is probably useful for finding out what the issue is. – Felix Kling Oct 20 '15 at 19:33
  • I updated the question – Shai M. Oct 21 '15 at 07:23
  • 1
    I've asked this same question about Browserify on the Highcharts page: http://stackoverflow.com/questions/33241358/how-to-import-highcharts-with-webpack-and-babel – Vik Feb 03 '16 at 11:37
  • I also need a solution for this. –  Feb 05 '16 at 16:14
  • @StefanKarlsson, One hacky solution is to just call jQuery as a script in your html, rather than importing it. It seems that the issue has to do with exposing jQuery globally, so you can either mess with your webpack config to do that, or just call it in a script on page load like I did. – treeblah Feb 05 '16 at 18:46
  • 1
    @aioko thanks for the workaround, i know it can be solved this way but it buggs me that it is a hack :) And if i understand it right, highcharts should not be dependent on jQuery anymore? or am i wrong? Im using version 4.2.2 But im not using jspm/systemjs instead of webpack: asked a question on the highchart forums:http://forum.highcharts.com/highcharts-usage/support-es6-module-loading-t34909/ –  Feb 06 '16 at 10:23

11 Answers11

11

Try this:

npm install highcharts

The issue I faced with this approach is using other modules in highcharts, such as highcharts-more, map, etc., To overcome this I imported highcharts and the other required modules like this:

import highcharts from 'highcharts';
import highchartsMore from 'highcharts-more';
highchartsMore(highcharts);
jfmercer
  • 3,641
  • 3
  • 29
  • 35
Amith M S
  • 183
  • 1
  • 8
5

2022 Update Highcharts now have an official wrapper for React - https://github.com/highcharts/highcharts-react

There is a NPM called commonjs-highcharts that solves it. Just run npm i commonjs-highcharts and import it:

import highcharts from "commonjs-highcharts"

Worked for me.

Andrey Bukati
  • 154
  • 5
  • not working for me... (I mean, the compilation works but I get $(...).highcharts is not a function) the only thing which seems to work is to import it with a require. – gtournie Nov 09 '15 at 00:55
  • OK I figured out: BowerWebpackPlugin is buggy and doesn't allow to expose jQuery as global anymore, and highcharts use window.jQuery... – gtournie Nov 09 '15 at 01:19
  • commonjs-highcharts is what finally (after hours of keyboard head slamming) worked for me. couldn't get highcharts-release or any other goofiness to work without doing some webpack config to expose globally – ragefuljoe Jan 30 '16 at 20:13
  • 3
    This will not work anymore. Highcharts has changed, it's standalone framework adaptor has been removed and `commonjs-highcharts` hasn't been updated in half a year. – Vik Feb 03 '16 at 11:38
  • As of today, commonjs-highcharts github returns a 404. This didn't work for me. For all you React folks, see my answer. – Charles Harmon Jul 14 '22 at 20:14
4

This is how I solved it, using Webpack v4.16.5 and Highcharts v5.0.11.

webpack.config

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: [{
        loader: 'babel-loader'
      }]
    },
    {
      test: /highcharts.*/,
      loader: 'imports-loader?window=>global&window.jQuery=>$'
    }
    // ...
  ],
  alias: {
    jquery: 'jquery/jquery'
    // ...
  }
},
externals: {
  jQuery: 'jQuery'
},
plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery',
    Highcharts: 'highcharts/highcharts'
    // ...
  })
]

main.js 1st option

import addMore from 'highcharts/highcharts-more'
import addExporting from 'highcharts/modules/exporting'
import addOfflineExporting from 'highcharts/modules/offline-exporting'
import addSolidGauge from 'highcharts/modules/solid-gauge'
import addDrilldown from 'highcharts/modules/drilldown'
import addTreemap from 'highcharts/modules/treemap'
import addFunnel from 'highcharts/modules/funnel'

addMore(Highcharts)
addExporting(Highcharts)
addOfflineExporting(Highcharts)
addSolidGauge(Highcharts)
addDrilldown(Highcharts)
addTreemap(Highcharts)
addFunnel(Highcharts)

main.js 2nd option:

require('highcharts/highcharts-more')(Highcharts)
require('highcharts/modules/exporting')(Highcharts)
require('highcharts/modules/offline-exporting')(Highcharts)
require('highcharts/modules/solid-gauge')(Highcharts)
require('highcharts/modules/drilldown')(Highcharts)
require('highcharts/modules/treemap')(Highcharts)
require('highcharts/modules/funnel')(Highcharts)

This way, it's both $(..).highcharts() and Highcharts.chart() usable.

Hope this helps!

Roman Pokrovskij
  • 9,449
  • 21
  • 87
  • 142
kylo
  • 41
  • 1
  • 2
2

Try doing an npm install highcharts-release. Then in your JavaScript file do import Highcharts from 'highcharts-release/highcharts';. There may be a better way, but that worked for me.

geoffberger
  • 21
  • 1
  • I not loading jQuery, therefore I want to load the standalone framework too. I get 'Uncaught TypeError: Cannot read property 'addEvent' of undefined' error from highcharts. – Shai M. Oct 25 '15 at 09:37
  • 3
    Highcharts is missing HighchartsAdapter. To get that going, one way to do this is to add HighchartsAdapter as a plugin. More specifically, in webpack.config.js, try adding `new webpack.ProvidePlugin({ HighchartsAdapter: 'highcharts-release/adapters/standalone-framework'})` under the plugin array. – geoffberger Nov 07 '15 at 22:37
  • It still doesn't work. I don't have any errors during the compilation, but I got `Uncaught TypeError: $(...).highcharts is not a function` when I load my page. (if I display `$.fn.highcharts` it's `undefined`) – gtournie Nov 09 '15 at 00:55
  • @gtournie did you ever figure this out. Having the same problem with getting $(...).highcharts to work – vernak2539 Apr 19 '17 at 10:31
  • @vernak2539 yes. First, I use the "highcharts-release" package. Then I use the provide plugin: `new webpack.ProvidePlugin({ 'window.jQuery': 'jquery' })` – gtournie Apr 20 '17 at 02:10
2

Try variations of:

require('expose?Highcharts!highcharts');
require('highcharts/modules/map')(Highcharts);
require('highcharts/highcharts-more')(Highcharts);
require('expose?Highcharts!highcharts/highstock');

If you wander around in ./node_modules/highcharts/... you might be able to trial-and-error your way into the modules and/or libs you need.

I don't have any joy using the form 

$('myselector').highcharts(...)

Replacing them with 

Highcharts.chart('myselector', ...)

works for me.

John Mee
  • 50,179
  • 34
  • 152
  • 186
1

You don't need any extra plugin or modification in your webpack config file. Just follow these steps:

install typings file for highcharts using this:

npm install --save @types/highcharts

change your import statements to following:

import * as Highcharts from 'highcharts'; import HighchartsMore = require('highcharts/highcharts-more'); HighchartsMore(Highcharts);

Umang Khandelwal
  • 116
  • 6
1

For me only this method is working with webpack(and was working with browserify as well):

global.js

import $ from 'jquery';

global.$ = global.jQuery = $;

app.js

import './globals';
import 'angular';
import 'highcharts';
// ...

I don't know why webpack.ProvidePlugin works fine with AngularJS but not with highcharts.

My config was looking like:

new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery', // for using with AngularJS
    _: 'underscore',
    moment: 'moment'
})

// I've also tried this but without luck:
{
  test: require.resolve('highcharts'),
  loader: 'imports-loader?jQuery=jquery'
}
ViES
  • 351
  • 3
  • 11
  • also you can import jQuery with `webpack.ProvidePlugin` and only declare `global.$ = global.jQuery = $`. I don't know why but `global.$` declaration doesn't work via `ProvidePlugin`. – ViES Feb 21 '19 at 11:56
0

Try using the package name as used during npm install:

import highcharts from 'highcharts-release';

Alastair
  • 1,710
  • 2
  • 17
  • 33
0

i am working with AngulrJS, ES6, Webpack and Babel. it took me a while to find it but i ended up using expose on highchart.

this is what i did:

npm install highcharts --save

import 'expose?highcharts!highcharts/highcharts';

only import as shown, no need for any thing else.

and then you can simple use highchart in your controller (without adding it as a dependency)

omer
  • 2,435
  • 2
  • 24
  • 28
0
import Highcharts from 'highcharts';
import 'highcharts-ng'  //add this line if you wish to use highcharts angular directive

And then add a new rule in the webpack.config.js

{
   test: require.resolve('highcharts'),
   use:[{
        loader: 'expose-loader',
        options: 'Highcharts'
   }]
}
Stone
  • 1,119
  • 9
  • 17
0

I am using Laravel Mix (on top of Webpack) in case this helps anyone out.

App.js

import Highcharts from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';

window.Highcharts = highcharts;

highchartsMore(Highcharts);

This works with:

"highcharts": "^9.3.2",
Charles Harmon
  • 380
  • 2
  • 10