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) ....
Improve this question
9
  • "doesn't work as expected" What do you expect and what happens? Commented Oct 20, 2015 at 18:51
  • So if the successful import happens, what is the problem? Commented Oct 20, 2015 at 19:21
  • 1
    I meant that I expect a successful import, but the import fail and I get an exception Commented Oct 20, 2015 at 19:32
  • 1
    I've asked this same question about Browserify on the Highcharts page: stackoverflow.com/questions/33241358/… Commented Feb 3, 2016 at 11:37
  • 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:forum.highcharts.com/highcharts-usage/… Commented Feb 6, 2016 at 10:23

11 Answers 11

Reset to default
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);
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This worked for me. Though, can you please explain why is highchartsMore(highcharts);necessary?
If you check the highcharts/modules/map.src.js file, it takes the Highcharts object as an argument.
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.

Improve this answer

5 Comments

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.
OK I figured out: BowerWebpackPlugin is buggy and doesn't allow to expose jQuery as global anymore, and highcharts use window.jQuery...
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
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.
As of today, commonjs-highcharts github returns a 404. This didn't work for me. For all you React folks, see my answer.
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!

Improve this answer

Comments

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.

Improve this answer

5 Comments

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.
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.
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 did you ever figure this out. Having the same problem with getting $(...).highcharts to work
@vernak2539 yes. First, I use the "highcharts-release" package. Then I use the provide plugin: new webpack.ProvidePlugin({ 'window.jQuery': 'jquery' })
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.

Improve this answer

Comments

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);

Improve this answer

Comments

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' }
Improve this answer

1 Comment

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.
0

Try using the package name as used during npm install:

import highcharts from 'highcharts-release';

Improve this answer

1 Comment

Did the install work? Are the files there in the node_modules directory?
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)

Improve this answer

Comments

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' }] }
Improve this answer

Comments

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",
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.