0

I am using the Charts module for displaying charts in my Drupal project. When I took the chart API example module page, it's not displaying any. It throws me this error (in the console):

Uncaught TypeError: $(...).highcharts is not a function

enter image description here

Any idea on how to resolve this issue? Or is there anything additional to do after installing the module?

I enabled all the sub-modules of the Chart module:

enter image description here

And I selected Highcharts as the Charting library option:

enter image description here

Notes:

  • I added the chart js file inside charts/modules/charts_api_example and referenced the charts_highcharts.js file in the charts_api_example.libraries.yml file.
  • I think the issue may be because jQuery must be loaded before Highcharts when checked the view source on the API examples page the jQuery is loaded at last after the Highcharts library. Not sure though that's the issue.
Improve this question
10
  • Is the highcharts JS library available? Is the library itself loaded?
    – Kevin
    Jan 16, 2019 at 14:37
  • @Kevin yea I added the chart js file inside charts/modules/charts_api_example and referenced the charts_highcharts.js file in the charts_api_example.libraries.yml file
    – KTM
    Jan 16, 2019 at 14:54
  • Sorry i don't know why the question is downvoted ?
    – KTM
    Jan 16, 2019 at 14:59
  • 2
    Beats me. What does the README say about any setup steps?
    – Kevin
    Jan 16, 2019 at 15:05
  • @Kevin yea I run as what said in the README file, I cd to the charts/modules/charts_api_example submodule and run composer require --prefer-dist google/charts:45 after modifying the composer.json in the repositories section by adding google_charts package
    – KTM
    Jan 16, 2019 at 15:19

1 Answer 1

Reset to default
1

I was thoroughly mistaken about the installation of the charts. After installation, I was editing the repositories section in composer.json and running the composer command to install the specific library (eg: composer require --prefer-dist highcharts/highcharts:6.0.4) from the particular sub-module. But it has to be done from the Drupal project root directory. Appreciate your valuable time and expecting this will help others.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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