Matt,

Check out this example page XML:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="false" tabtooverride="Opportunity"> <models> <model id="OpportunityAgg" limit="100" query="true" createrowifnonefound="false" sobject="Opportunity" datasource="salesforce" type="aggregate"> <fields><field id="Amount" name="sumAmount" function="SUM"/></fields> <conditions/> <actions/> <groupby method="simple"><field id="StageName" name="stageName"/></groupby></model></models> <components> <wrapper uniqueid="sk-3ph6ah-90"> <components> <template multiple="true" uniqueid="sk-3ph8ni-97" allowhtml="true" model=""> <contents>&amp;lt;div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"&amp;gt;&amp;lt;/div&amp;gt;</contents> <renderconditions logictype="and"/></template> </components> <styles> <styleitem type="background" bgtype="none"/> <styleitem type="border"/> <styleitem type="size" width="custom" height="custom"> <styles> <styleitem property="min-width" value="310px"/> <styleitem property="min-height" value="400px"/> </styles> </styleitem> </styles> </wrapper><skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="false" model="OpportunityAgg" buttonposition="" mode="readonly" allowcolumnreordering="true" responsive="true" uniqueid="sk-1HVg6G-1423"> <fields> <field id="StageName" name="stageName" hideable="true" uniqueid="fi-1HVi0y-1432"/> <field id="Amount" name="sumAmount" hideable="true" uniqueid="fi-1HVi0z-1433"/> </fields> <rowactions/> <massactions usefirstitemasdefault="true"/> <views> <view type="standard"/> </views></skootable> </components> <resources> <labels/> <css/> <javascript> <jsitem location="external" name="Highcharts" cachelocation="false" url="<a href="https://code.highcharts.com/highcharts.js&quot;>var">https://code.highcharts.com/highcharts.js">var</a> params = arguments[0],$ = skuid.$;</jsitem> <jsitem location="external" name="Treemap" cachelocation="false" url="<a href="https://code.highcharts.com/modules/treemap.js&quot;>var" title="Link: https://code.highcharts.com/modules/treemap.js&quot;>var">https://code.highcharts.com/modules/treemap.js">var</a> params = arguments[0],$ = skuid.$;</jsitem> <jsitem location="inline" name="pageLoad" cachelocation="false" url="">(function(skuid){var $ = skuid.$;$(document.body).one('pageload',function(){ var opps = skuid.model.getModel('OpportunityAgg'); var rows = opps.getRows(); //define first level of treemap: <a href="https://www.highcharts.com/demo/treemap-with-levels" title="Link: https://www.highcharts.com/demo/treemap-with-levels">https://www.highcharts.com/demo/treemap-with-levels</a> var oppdata = []; oppdata.push({id: 'I', name: 'In Progress Stages', color:"#EC2500"}); oppdata.push({id: 'C', name: 'Closed Stages', color:'#EC9800'}); //define second level of treemap $.each(rows, function(i, row){ var sName = row.stageName; if (sName == 'Closed Won' || sName == 'Closed Lost') { oppdata.push({name: row.stageName, parent:'C', value:row.sumAmount}); } else { oppdata.push({name: row.stageName, parent:'I', value:row.sumAmount}); } }); /* var exampledata = [{ id: 'A', name: 'Apples', color: "#EC2500" }, { id: 'B', name: 'Bananas', color: "#ECE100" }, { id: 'O', name: 'Oranges', color: '#EC9800' }, { name: 'Anne', parent: 'A', value: 5 }, { name: 'Rick', parent: 'A', value: 3 }, { name: 'Peter', parent: 'A', value: 4 }, { name: 'Anne', parent: 'B', value: 4 }, { name: 'Rick', parent: 'B', value: 10 }, { name: 'Peter', parent: 'B', value: 1 }, { name: 'Anne', parent: 'O', value: 1 }, { name: 'Rick', parent: 'O', value: 3 }, { name: 'Peter', parent: 'O', value: 3 }, { name: 'Susanne', parent: 'Kiwi', value: 2, color: '#9EDE00' }]; */ $('#container').highcharts({ series: [{ type: "treemap", layoutAlgorithm: 'stripes', alternateStartingDirection: true, levels: [{ level: 1, layoutAlgorithm: 'sliceAndDice', dataLabels: { enabled: true, align: 'left', verticalAlign: 'top', style: { fontSize: '15px', fontWeight: 'bold' } } }], data: oppdata }], title: { text: 'Opportunity Revenue By Stage' } });});})(skuid);</jsitem> </javascript> </resources> <styles> <styleitem type="background" bgtype="none"/> </styles></skuidpage> 

I extended the example that Irvin gave here to add in an (admittedly contrived) example based on opportunity data. It’s not the same type of highchart as you want to show, but I hope it will get you started in the right direction!

Thanks!

Amy