Chart legend divId

Support
#1

I am trying to make use of the “divId” attribute of a chart legend. I have tried using the HtmlBox container to create a specific

to use for the legend but that didn’t work. Could I get some guidance on this?

Platform v7.2

#3

Hello,

in the HtmlBox you should specify div with an id attribute:

<htmlBox htmlSanitizerEnabled="false">
    <templateContents>
        <![CDATA[
        <div id="legendId" class="legend-chart"></div>
        ]]>
    </templateContents>
</htmlBox>

And Legend element will look like:

<charts:legend enabled="true"
               divId="legendId"/>

In case of SerialChart legend has position: absolute, so I added the following style to show it correctly:

.legend-chart {
  position: absolute;
  width: 100px;
}
#5

Finally getting back around here.

I set up the chart as you recommend. But I have an issue with a large number of legend items. I have 100+ legend items (one for each customer, it is a stacked chart showing sales by each customer). So the items overflow the legend div.

If I use the element inspector to change the height of the legend div to “100%” and “overflow: scroll”, it behaves correctly. But every time the chart is painted, those the height attribute is replaced…

I thought I could add the height to the legend div in the HTMLBox, but it doesn’t stick.
image

image

Is there a way for me to address this or is it a framework thing?

#6

Changes in element inspector are removed after page refreshing. It seems AmCharts replaces “height” value by SVG’s “height”. In this case, we should change parent div (HtmlBox) styles, for instance:

<htmlBox htmlSanitizerEnabled="false"
         width="300px"
         height="100%"
         css="position: relative; overflow: auto;">
    <templateContents>
        <![CDATA[
            <div id="legendId" class="legend-chart"></div>
        ]]>
    </templateContents>
</htmlBox>
#7

It is working. Much appreciated.

My final code:

<htmlBox htmlSanitizerEnabled="false" width="350px" height="100%" 
css="position: relative; overflow: auto;">
<templateContents>
<![CDATA[
<div id="legendId" class="legend-chart" ></div>
]]>
</templateContents>
</htmlBox>

and

.legend-chart {
  position: absolute;
  height:100%;
  width:100%;
  overflow:auto;
  padding-bottom:20px
}