I am trying to load a Highcharts module (called “dumbbell”) in all the possible ways I can think of, and although I was able to get it to work, it only worked temporarily (strangely enough). The moment I clicked “Enable link sharing”, it broke and I couldn’t get it to work again.
The following scripts need to be loaded:
<script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <script src="https://code.highcharts.com/modules/dumbbell.js"></script>
I tried to
require each, and although the first two “work” (i.e. load without error), the last one complains of a missing
k.arearange. Arearange is something added to Highcharts by
The problem is that these scripts really want to be loaded together. So the only way I could think of doing that was:
Believe it or not, this actually worked… for a little while… but then it stopped working. It started to complain that
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“script-src”).
Refused to execute a script because its hash, its nonce, or 'unsafe-inline' does not appear in the script-src directive of the Content Security Policy.
… as well as mentions about
Unrecognized Content-Security-Policy directive 'prefetch-src' and
Unrecognized Content-Security-Policy directive 'worker-src'.
Can anyone please recommend a more reliable way of getting these scripts loaded?
PS: Here’s a sample JSFiddle for what I’m trying to get working in Observable.