How to make skuid highcharts and highcharts-more.js work on the same page

I followed Irvin’s example of how to use additional chart types from Highcharts to create a gauge chart ( ).

It’s working fine until I try to add it to a page that also uses the highcharts resources provided by Skuid.  Initially I got Error #16 (trying to load highcharts twice).  I removed the external references for highcharts.js and for exporting.js.  Now the line chart displays correctly (standard skuid), and the gauge background renders, but without data.

The console shows an error: highcharts-more.js:29 Uncaught TypeError: I is not a function

Tried with and without the external reference for modules/exporting.js - same result.

      • crickets * * *

Hey Jared,

Usually, when I want to do something like this I download the .js resource for the additional highcharts then upload it to my salesforce org as a static resource.

Then I can reference it from my Skuid page as a static resource. I use a js before render snippet on the chart to reassign the chart type:

var params = arguments[0], $ = skuid.$; <br>params.chart.type = 'waterfall'; 

/ this a waterfall chart. lmk if that helps!

Jared … did you ever get this working? My team are hitting exactly the same problem.

Glenn - I’m sorry to report that I did not.  Priorities shifted, and I never got back to trying Jacob’s suggested approach.

The problem we’re hitting is that to use additional chart types (in our example we’re using Solid Gauge), we need to reference the highchartsMore and highchartsSolidGauge Javascript libraries. Those are dependent on the core Highcharts library, which in theory ships with Skuid, but they can’t find it. The only way to make them work is to add in another reference to the core Highcharts library as an external resource, but doing that breaks Skuid’s chart components.

Is that what you found? I’m not sure how Jacob’s post solves that.

I don’t remember the specifics anymore, but that sounds about right.

Hey Guys,

That’s true, unfortunately that old approach no longer works.

Luckily there is an easier/better approach which is to place one of the charts in a separate page then bring that in via a page include.

by doing that you isolate the javascript since the include works as an iframe.

ive only tried this bringing the skuid charts in as an include to a page with a new chart. but in theory it should work either way.

good luck!

Thanks Jacob. So you’re saying that if we have a page with Skuid charts in it, then if we want to add say a Highcharts Solid Gauge into that page too, we need to bring in the Solid Gauge via a page include?

glenn, did you ever get this to wok?  I am trying to create a guage chart as well for a job dashboard application

1 Like