v2 Creating Skuid Chart using Component Factory creates Errors

As the title says when I try to create a model using component factory it creates an error instead:

  • TypeError: Cannot read property 'core' of undefined

I am able to bypass the error if I also create a chart with Skuid Composer, but that's a hack and not ideal.

Use case: I have a function that dynamically creates models, then it creates charts and tables for the model.


<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">


<model id="Activity" query="true" createrowifnonefound="false" datasource="salesforce" sobject="CSP02_CS_Activity__c" limit="">


        <field id="Name"/>

        <field id="Category__r.Name"/>




    <groupby method="simple"/>




<skuid__buttonSet uniqueid="sk-3SG--5262">


        <skuid__buttonGroup uniqueId="sk-3SG--5260">


                <skuid__button label="Create Chart" uniqueId="sk-3SG--5261">


                        <action type="custom" snippet="newSnippet"/>







<skuid__wrapper uniqueid="TestJSChartWrapper">






    <renderConditions logictype="and"/>








<jsitem location="inlinesnippet" name="newSnippet" cachelocation="false">

strXML = `

    &lt;skuid__chart model="Activity" maintitle="{{Model.labelPlural}}" type="donut" uniqueid="sk-3SEU-6021"&gt;


            &lt;axis id="axis1"/&gt;



            &lt;axis id="categories" categorytype="field"/&gt;



            &lt;series valuefield="Name" splittype="field" modelId="Activity" aggfunction="count" splitfield="Category__r.Name"/&gt;



        &lt;legend layout="horizontal" halign="center" valign="bottom"/&gt;



xmlDef = skuid.utils.makeXMLDoc(strXML);

var dynamicChartComponent = skuid.$(




dynamicChartComponent.prepend('&lt;div id="new_div"&gt;&lt;/div&gt;');

test = dynamicChartComponent.find('#new_div');

var myComponent = skuid.component.factory({

    element: test,

    xmlDefinition: xmlDef,

    type: "skuid__chart",


xmlRenderComponent = '&lt;actions&gt;&lt;action type="toggleRenderComponent" behavior="show" componentid="TestJSChartWrapper"/&gt;&lt;/actions&gt;';

xmlReady = skuid.utils.makeXMLDoc(xmlRenderComponent);







    <styleitem type="background" bgtype="none"/>



Best Answer

  • Anna Wiersema
    Anna Wiersema 🛠️ 
    Accepted Answer

    Hi Lukas, there is no public URL to properly load Highcharts since we custom load it into our codebase.

    We recommend creating some chart that is has a render condition to never render. Then, when you have the data you need for the chart, you can render that chart and it would then properly load the Highcharts library.


  • Hi @lukaspovilonis, I checked with the product engineering team and the reason this isn’t working is because we only load the chart library IF we detect a skuid chart component on the page. Since you're dynamically loading the chart, there is no library loading.

    Why are you using a snippet to create the chart? We recommend using a Skuid chart component and display logic (e.g. have the button toggle the chart component on, or check a ui only checkbox that controls the chart's display logic), is this a possibility for you?

  • Hi Anna,

    Thank you for checking with the team.

    I need to create charts dynamically, hence i'm creating them using JS Snippets.

    Would I be able to load them, if so what are the libraries manually which would I load? Preferably they are available on public URL.



  • Hi Anna,

    Thank you for the support on this issue, I will do that then.

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!