0

I'm trying to load highcharts in a custom admin form, but it comes out as undefined in my module.

My requirejs-config.js

var config = {
    paths: {
        'highcharts': 'http://code.highcharts.com/highcharts',
    },
    shim: {
        'highcharts': {
            deps: ['jquery']
        }
    }
}

How I'm calling it in my pthml:

<div id="customer-graph"></div>
<script type="text/javascript">
    require(["jquery","highcharts"], function ($, hc) {
        console.log(hc) //undefined
        hc.chart('customer-graph') //call chart on undefined
    });
</script>

I've looked at all the other posts about requirejs and highcharts and couldn't find any solution to my issue. Can you help ?

1

Turns out, highcharts needs a special configuration :

requirejs-config.js

var config = {
    packages: [{
        name: 'highcharts',
        main: 'highcharts'
    }],
    paths: {
        'highcharts': 'http://code.highcharts.com',
    }
}
| improve this answer | |
  • If its working mark as accepted answer – Nilesh Dubey Oct 27 at 14:31
  • Need to wait 48h after posting to accept my own answer – Badong Oct 27 at 14:54
0

Please use following code in requirejs-config.js file instead of current code and then check.

var config = {
    shim: {
        'highcharts': {
            exports: 'http://code.highcharts.com/highcharts' ,
            deps: 'jquery'
        }
    }
}

If this helps then hit like and accept as answer.

Enjoy your coding !!! :)

Thank you,
Hiren Patel

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.