http://ingesolvoll.github.io/posts/2018-12-04-revisited-how-to-use-a-charting-library-in-re-frame/

Given example is pretty minimal, so you should probably be able to make a copy to work for your system

Cool. Thanks. This piece has turned out to be more complicated than everything else I've done.

@U21QNFC5C I'm finally trying to get this working. But my project uses shadow-clj so I can't use cljsjs version of highcharts. I didn't know what I was getting into with shadowcljs. I'm having trouble with the mount code. I don't know enough js yet to understand. It appears that I'm calling chart. ok. but the node specification is not right, so I get a stack overflow with js/Highcharts, or if I get it wrong I get a null node. How do I know what node to give it ? Here's my code.

(ns prod-inv-ui.views
  (:require
   [re-frame.core :as rf]
   [reagent.core :as r]
   [re-com.core
    :refer [h-box v-box box gap single-dropdown radio-button button alert-box
            input-text checkbox label title hyperlink-href p p-span throbber]]
   [prod-inv-ui.subs :as subs]
   [prod-inv-ui.events :as events]
   [re-frame-datatable.core :as dt]
   ["highcharts" :as highcharts]))

(defn mount-chart [comp]
  (highcharts/chart. highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

;; (defn mount-chart [comp]
;;   (.chart js/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

(defn update-chart [comp]
  (mount-chart comp))

(defn chart-inner []
  (r/create-class
   {:component-did-mount   mount-chart
    :component-did-update  update-chart
    :reagent-render        (fn [comp] [:div])}))

(defn chart-outer [config]
  [chart-inner @config])

(defn test-chart
  []
  (let [chart-data (rf/subscribe [::subs/test-chart])]
    (when (some? chart-data)
      (fn []
        [chart-inner chart-data]))))

your are not derefing chart-data subscription at the bottom

oh wait, i see what you are doing now

This bit seems off

(defn mount-chart [comp]
  (highcharts/chart. highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

yea. definitely. I just don't know what. If I leave the node as js/Highcharts I get a stack overflow.

putting a . after chart means you are calling the chart constructor, the dot should be at the start of the word to mean a function call

use the correct function interop syntax, and try to remove the component-did-update parts. I’m suspecting they are causing your loop

ok. that helped. Now I'm getting this.

views.cljs:14 Uncaught TypeError: Cannot read property 'highcharts' of undefined
    at Constructor.prod_inv_ui$views$mount_chart (views.cljs:14)
    at Constructor.reagent$impl$component$custom_wrapper_$_componentDidMount (component.cljs:194)
    at Constructor.componentDidMount (factory.js:666)
    at commitAllLifeCycles (react-dom.development.js:17335)
    at HTMLUnknownElement.callCallback (react-dom.development.js:150)
    at Object.invokeGuardedCallbackImpl (react-dom.development.js:200)
    at invokeGuardedCallback (react-dom.development.js:257)
    at commitRoot (react-dom.development.js:18949)
    at react-dom.development.js:20419
    at Object.exports.unstable_runWithPriority (scheduler.development.js:256)

(defn mount-chart [comp]
  (.highcharts/chart highcharts/Highcharts (r/dom-node comp) (clj->js (r/props comp))))

js/Highcharts gives reference error Highcharts undefined.

the correct way is (.chart the-highchart-object)

And given your require, i’m no shadow-cljs expert, but I would guess it might look like (.chart highcharts)

you might want to log out the value of your highcharts required object to see what it is.

yea, I've tried that, and I've tried changing my require to just `["highcharts"] and using the original code. js/Highcharts is still undefined.

printing js/Highcharts prints nothing.

with this, (.highcharts/chart highcharts (r/dom-node comp) (clj->js (r/props comp))) and the did-mount code I get maximum call stack size exceeded.

Of course, commending out the did-mount works but I get no chart.

I still think your use of interop is wrong

you should try to do (js/console.log highcharts)

I suspect npm imported throught shadow-cljs should not be prefixed with js/

Did you try (.chart highcharts)?

Yes. It cant find chart.

So given that this is most likely about how you do interop in shadow, you should ask about that specifically on shadow channel

Yea. I was just thinking that.

https://clojureverse.org/t/guide-on-how-to-use-import-npm-modules-packages-in-clojurescript/2298

skimmed it, might be that you need (highcharts/chart params)

Ah. No dot ?

if you read the guide i pasted, it seems that’s the correct way

Reading now.

I think you are right. I am walking. I will try it when I get back.

So still not working. Highcharts is an undefined symbol. I added a compiler option to preserve externes that doesnt seem to be working. So it is close. I posted a question in shadow-cljs.

@U21QNFC5C In the end this is what worked.

(hc/chart (r/dom-node comp) (clj->js (r/props comp)))

I don't get any errors but I don't get any output either. I'm also using re-com, but that seems like it shouldn't be a problem. maybe I'm wrong about that. I have it in an v-box [(rev-chart-js-component)]