Using Highcharts with importmap on Rails

[rishard]

Hello. I have some problems with using Highcharts on Ruby on Rails 7 if I use importmap. Please advise.

My chart (packedbubble) works if I use cdn.
But if my importmap.rb contains the line:

Code: Select all

pin "highcharts", to: "https://ga.jspm.io/npm:[email protected]/highcharts.js"

and my application.js has this:

Code: Select all

import Highcharts from "highcharts"
window.Highcharts = Highcharts;

, I can't get this chart to work.
Any ideas? I really need some sound advice. I only need highcharts.js and highcharts-more.js, but I don't understand how to make them work with importmap in Ruby on Rails 7.

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

Me and my fellow collegues tried to figure out what's the problem here but none of us really have experience with Ruby so our attempt to find a solution for you has unfortunately failed. I apologize but for now we're unable to help you with this:(

But this forum is a public place for the community so I truly hope that there will be someone else able to help you with this. I suggest you post this question on StackOverflow to reach a wider community of developers.

Again, apologies, and please do not hesitate to ask here if you have any Highcharts-related questions in the future!

Kind regards!

[rishard]

OK. Thank you for your response. I will take your advice. But I hope you'll let me ask some more questions here? I will try to localize the problem. I hope the use of importmap is similar for different platforms...

So, this case works fine on default Ruby on rails 7:

view


importmap

Code: Select all

pin "highcharts", to: "https://ga.jspm.io/npm:[email protected]/highcharts.js"

js

Code: Select all

import Highcharts from "highcharts"
window.Highcharts = Highcharts;

---

First question. If I delete this line:

Code: Select all

window.Highcharts = Highcharts;

, the chart will stop working:

Uncaught ReferenceError: Highcharts is not defined
at HTMLDocument.<anonymous>

Please tell me, is this a feature specific to using Highcharts on other platforms, or for Ruby on Rails only? What's going on here?

Second question. If the HTML I showed requires not only highcharts.js but also highcharts-more.js , how should I change the shown configs? Should I add in the importmap

Code: Select all

pin "highcharts-more", to: "https://ga.jspm.io/npm:[email protected]/more.js"

, or is one pin enough for me?

[jakub.s]

Hi,

Thanks! Of course you can ask questions here!

I'm not exactly sure where this issue stems from but I'll try to help you either way.

1. You shouldn't have to do this window.Highcharts = Highcharts if you do import Highcharts from 'highcharts'. I'm sure that this is not necessary when you import Highcharts installed through npm or yarn but from what I can see you're doing it with importmap "pin"

2. Also, another difference is that when you install highcharts through npm you get the full package with all the additional modules that you can import (including highcharts-more). So then you can do import HighchartsMore from 'highcharts/highcharts-more' and wrap it similarly to the way you do with Highcharts wrappers: https://github.com/highcharts/highchart ... d-a-module

So, one pin will not be enough for you as your pin refers to a single script (highcharts.js) which does not include highcharts-more (which is included in the npm package in highcharts/highcharts-more.js).

P.S. Maybe you could find these articles useful:
- https://www.highcharts.com/blog/tutoria ... ighcharts/
- https://medium.com/@ellencooper74/creat ... b202ac2fb1

Let me know if I was clear with my explanation. Also, if you post this question on StackOverflow please include a link here.

Best regards!

[rishard]

1. You shouldn't have to do this window.Highcharts = Highcharts if you do import Highcharts from 'highcharts'. I'm sure that this is not necessary when you import Highcharts installed through npm or yarn but from what I can see you're doing it with importmap "pin"

You are right. I do not have this need if I am working with yarn. As an example, I uploaded a working example ( jsbundling-rails[webpack] ) on github. Maybe it will be useful for someone.





OK, thanks. If I have any news on how to work with Highcharts via importmap, I'll let you know about it.

[jakub.s]

Great, thanks!

That would be very helpful for us and the future RoR+Highcharts users.

I wish you good luck with your project!

[rishard]

God knows, it's weird for me...
Of course, there is no problem in using sprockets to compile and maintain Highcharts assets.

Code: Select all

//= link highcharts/highcharts.js
//= link highcharts/highcharts-more.js
//= link highcharts/modules/exporting.js
//= link highcharts/modules/export-data.js
//= link highcharts/modules/accessibility.js

But if I'm working with ES6 Highcharts modules compiled via webpack, I'm having to add to HTML:

Code: Select all

document.addEventListener('DOMContentLoaded', function () {
    const chart = ...
    
    });

, also I have to add this line in javascript:

Code: Select all

window.Highcharts = Highcharts

I've pored over the SO, it seems to be an orthodox solution.

[rishard]

Damn it, this is a stupid mistake.
It's not:

Code: Select all

pin "highcharts-more", to: "https://ga.jspm.io/npm:[email protected]/more.js"

That's the right way:

Code: Select all

pin "highcharts/highcharts-more", to: "https://ga.jspm.io/npm:[email protected]/highcharts-more.js"