score:5

Accepted answer

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.

score:0

try using the package name as used during npm install:

import highcharts from 'highcharts-release';

score: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)

score: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'
   }]
}

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

score: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'
}

score: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.

score: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.

score:3

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!

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

Related Query

More Query from same tag