Chart Data Labels On Demand

Jakub,

Here is a sample page to get you started. I have 2 snippets on this page: a snippet that runs before the chart renders and a second snippet to render the chart after the action to enable/disable the chart labels.

I used a UI Only model to hold the value of what to display. In the before the chart renders snippet I get the value from the UI Only model to pass into the value to enable/disable the labels. I use the same value to render 2 buttons to act as a toggle for the labels.

Thanks,

Bill

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Task">
    <models>
        <model id="Task" limit="100" query="true" createrowifnonefound="false" sobject="Task">
            <fields>
                <field id="Subject"/>
                <field id="CreatedDate"/>
                <field id="Status"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="TaskDonut" limit="" query="true" createrowifnonefound="false" adapter="" type="aggregate" sobject="Task">
            <fields>
                <field id="Id" name="countId" function="COUNT"/>
            </fields>
            <conditions/>
            <actions/>
            <groupby method="simple">
                <field id="Status" name="status"/>
            </groupby>
        </model>
        <model id="UIOnly" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="LabelsEnabled" displaytype="BOOLEAN" label="LabelsEnabled" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="false"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Task" uniqueid="sk-10WJIG-74">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="multi" label="Enable Labels" uniqueid="sk-2B8D-345">
                    <renderconditions logictype="and">
                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="UIOnly" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="LabelsEnabled" value="false"/>
                    </renderconditions>
                    <enableconditions/>
                    <actions>
                        <action type="updateRow" fieldmodel="UIOnly" affectedrows="context" field="LabelsEnabled" enclosevalueinquotes="false" value="true"/>
                        <action type="custom" snippet="rerenderChart"/>
                    </actions>
                </action>
                <action type="multi" label="Disable Labels" uniqueid="sk-2B8D-450">
                    <actions>
                        <action type="updateRow" fieldmodel="UIOnly" affectedrows="context" field="LabelsEnabled" enclosevalueinquotes="false" value="false"/>
                        <action type="custom" behavior="toggle" componentid="sk-10WKeA-87" snippet="rerenderChart"/>
                    </actions>
                    <renderconditions logictype="and">
                        <rendercondition type="fieldvalue" operator="=" enclosevalueinquotes="false" fieldmodel="UIOnly" sourcetype="fieldvalue" nosourcerowbehavior="skipandnorender" field="LabelsEnabled" value="true"/>
                    </renderconditions>
                    <enableconditions/>
                </action>
                <action type="savecancel" uniqueid="sk-2B8D-197"/>
            </actions>
        </pagetitle>
        <skuidvis__chart model="TaskDonut" maintitle="{{Model.labelPlural}}" type="donut" uniqueid="sk-10WKeA-87" rendersnippet="beforeRenderSnippet">
            <dataaxes>
                <axis id="axis1"/>
            </dataaxes>
            <categoryaxes>
                <axis id="categories" categorytype="field"/>
            </categoryaxes>
            <serieslist>
                <series valuefield="countId" splittype="field" splitfield="status"/>
            </serieslist>
            <colors/>
            <legend layout="horizontal" halign="center" valign="bottom"/>
            <renderconditions logictype="and"/>
        </skuidvis__chart>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Task" mode="read" uniqueid="sk-10WJIG-75">
            <fields>
                <field id="Status" valuehalign="" type="" uniqueid="sk-2B8D-215"/>
                <field id="Subject" allowordering="true" uniqueid="sk-2B8D-218"/>
                <field id="CreatedDate" allowordering="true" valuehalign="" type="" uniqueid="sk-2B8D-221"/>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
        </skootable>
    </components>
    <resources>
        <labels/>
        <css>
            <cssitem location="inline" name="newcss" cachelocation="false">.sk-chart-innertext {
    visibility: hidden;
}</cssitem>
        </css>
        <javascript>
            <jsitem location="inlinesnippet" name="beforeRenderSnippet" cachelocation="false">var params = arguments[0],
$ = skuid.$;
console.log(params);
    var enable=skuid.model.map().UIOnly.data[0].LabelsEnabled;
    
params.chart.events={
          load:function(){
          var chart = this,
            series = chart.series[0],
              firstPoint = series.data[0].y,
              nextPoint = series.data[1].y,
              percent = (firstPoint / (firstPoint + nextPoint)) * 100,
            value = 0;
              
          chart.setTitle({
          text: 100 - percent + '%',
          align: 'center',
            verticalAlign: 'middle'
          });
        }
    
};
    params.plotOptions.pie.dataLabels = {
    enabled: enable,
    format: '&amp;lt;b&amp;gt;{point.name}&amp;lt;/b&amp;gt;: {point.y:,.0f}',
        };
    
    params.colors =  ['#8edc00', '#e8eb00', '#e8aabb'];
    
</jsitem>
            <jsitem location="inlinesnippet" name="rerenderChart" cachelocation="false">var params = arguments[0],
$ = skuid.$;
skuid.$C('sk-10WKeA-87').render();</jsitem>
        </javascript>
        <actionsequences uniqueid="sk-2B8D-291"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>