Chart Data Labels On Demand

Hi All. 

I hope that you can give me some hints. Thank you for your time :) I’m trying to meet a requirement to show chart data labels on demand e.g. by a button click. 

So in short, I have a chart which has 4 series, 2 columns and 2 lines as this is how the client want to see it. Of course they see the data while hoovering but they also want to do a screenshot with data for a given axis. Showing all labels is not a solution (chart is not looking good).

The best would be to have button for each of axis or axis grouping (like 2 columns = group 1 & 2 lines = group 2): 
1. Action first - deactivate not required axis on the chart; 
2. Action two - show data labels for left axis. 

Additional button - revert to normal view. 

I know that I can get the data labels using a snippet e.g.
But how to make this all work correctly? 

Would be grateful for any advice. 



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.



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