Showing just the legend of an Oracle Apex/AnyChart Pie Chart

Question

I'm currently trying to display a dashboard of fixed size pie charts in APEX 4.26 however, they need to have a legend and their content is dynamic. This means that a chart with more labels has a larger legend and a smaller pie chart than say one with only two labels.

My current possible solution is to create two regions for each chart, one with the pie in it and one with just the legend, then I can control the size of these regions easily.

Obviously, I can easily turn off the Legend for the first region but I'm having a bit of trouble displaying only the legend in the other. Can anyone help me with what I need to alter or remove from the XML? (I'm presuming this is the way to do it). Here is my XML at the minute:

<?xml version = "1.0" encoding="utf-8" standalone = "yes"?>  
<anychart>  
  <settings>  
    <animation enabled="true"/>  
    <no_data show_waiting_animation="False">  
      <label>  
        <text>#NO_DATA_MESSAGE#</text>  
        <font family="Verdana" bold="yes" size="10"/>  
      </label>  
    </no_data>  
  </settings>  
  <margin left="0" top="-10" right="0" bottom="0" />  
  <charts>  
    <chart plot_type="Pie" name="chart_3232705401305025">   
      <chart_settings>  
        <title enabled="False" />  
        <chart_background>  
          <fill type="Solid" color="0xffffff" opacity="0" />  
          <border enabled="false"/>  
          <corners type="Square"/>  
        </chart_background>  
        <data_plot_background>  


        </data_plot_background>  


        <legend enabled="true" position="Bottom" align="Near" elements_layout="Horizontal" ignore_auto_item="True">  
          <title enabled="False"/>  
          <icon>  
            <marker enabled="true" />  
          </icon>  
          <items>  
            <item source="Points" />  
          </items>  
          <font family="Tahoma" size="10" color="0x000000" />  
        </legend>  
        <chart_animation type="Appear" interpolation_type="Quadratic" show_mode="OneByOne"/>  
      </chart_settings>  
      <data_plot_settings enable_3d_mode="false" >  
        <pie_series style="Aqua">  
          <tooltip_settings enabled="true">  
            <format><![CDATA[{%Name}{enabled:False} - {%Value}{numDecimals:0,decimalSeparator:.,thousandsSeparator:\,}]]></format>  
            <font family="Tahoma" size="10" color="0x000000" />  
              <position anchor="Float" valign="Top" padding="10" />   
          </tooltip_settings>  
          <label_settings enabled="false"/>  
          <pie_style>  


          </pie_style>  
          <marker_settings enabled="True" >  
            <marker type="None" />  
          </marker_settings>  
          <connector color="Black" opacity="0.4"/>  
        </pie_series>  
      </data_plot_settings>  


#DATA#  
    </chart>  
  </charts>  
</anychart>  

Any pointers much appreciated! Or any bright ideas on an easier way to achieve this.

Thanks!

Answer 1

Just to update this question, I have come up with a possible solution that worked for one chart and thought I would outline it here in case anyone looks this up and there is no answer.

I made the pie chart in the second region as small as possible and then used CSS to move the second region over the first pie chart so that the legend from the second region is correctly positioned beneath the pie chart in the first.

I then used z-index to move the second region behind the first. This seems to work, I just need to somehow hide the 'waiting for data' message from the second region.

Answer 2

You can make chart invisible and the set legend to float and overlap the whole chart, sample below does this, you can replicate it in APEX too.

Key settings are:

<chart_settings>
   <legend enabled="true"  position="Float" width="100%" height="100%"/>
   <title enabled="false" />
</chart_settings>    

Full settings:

<?xml version="1.0" encoding="UTF-8"?>
<anychart>
  <charts>
    <chart plot_type="Pie">
      <data_plot_settings>
        <pie_series apply_palettes_to="Points" radius="0">
          <tooltip_settings enabled="false"/>
          <label_settings enabled="false"/>
        </pie_series>
      </data_plot_settings>
      <chart_settings>
        <legend enabled="true"  position="Float" width="100%" height="100%"/>
        <title enabled="false" />
      </chart_settings>      
      <data>
        <series name="Year 2003">
          <point name="Department Stores" y="637166" />
          <point name="Discount Stores" y="721630" />
          <point name="Men's/Women's Specialty Stores" y="148662" />
          <point name="Juvenile Specialty Stores" y="78662" />
          <point name="All other outlets" y="90000" />
        </series>
        <series name="Year 2004">
          <point name="Department Stores" y="737166" />
          <point name="Discount Stores" y="537166" />
          <point name="Men's/Women's Specialty Stores" y="188662" />
          <point name="Juvenile Specialty Stores" y="178662" />
          <point name="All other outlets" y="89000" />
        </series>
      </data>
    </chart>
  </charts>
</anychart>

Legend settings and positioning is described at: http://6.anychart.com/products/anychart/docs/users-guide/index.html?legend-text-formatting.html