Totals in legends being cut off

Hello folks,
I needed to use the exact example that is in the documentation showing how to include totals in the widget’s legend (http://documentation.arcadiadata.com/4.3.0.0/#pages/topics/custom-style-site-wide-define-js.html).
But as you can see, even though the total is in the thousand (#,###), it’s being cut off, while in the example in the documentation, it’s not. Is there anything else I need to do?


I’m looking at the page in Chrome’s latest version and using Arcadia 4.2.0

I see that there’s a Legend Item Width that seems to help with the issue, but is it possible to adjust automatically?
Also, is there a way to set this via a custom JS? Just because I have 30+ visuals that would need this change, and since they are all using the same custom style, I rather do it once for all widgets, than one by one manually.

Thank you in advance

Hi Fernie, On v 4.3, users are able to control the width of the Legend under Settings. Another alternative for long legends is to place the legend below the Pie which is also a setting which can be overriden on the Visual. (see attached image)

image

Thanks,
-Priyank

Thank you Priyank for the response. In my post I did mention that I saw that setting (in 4.2).

Is there a way to do it via custom JS?

Fernie - made small tweak to the JS and added some CSS to help. Give it a try. It should work for majority of cases:

====== CSS ======

svg.arc-viz-legend {
    width: 240px !important;
}

======= JS ======

 return function() {
    var f = function() {};
    f.version = "1";
    f.settings = function() {
        return [
            {
                id: 'Square Size',
                defaultValue: '15',
            },
        ];
    };  

    f.afterDraw = function() {
        var rows = arcapi.dataResult().rows();
        if (rows.length === 0) {
            return;
        }
        
        var ilen = $('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').children('text').length;
        var data = rows;
        var legendlabel, pielabel, svg, c, sel;

        data.forEach(function(d, i) {
            for (c=0; c < ilen; c++ ){
                legendlabel = $('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').children('text')[c].innerHTML;

                if(d[0].search(legendlabel)>-1){
                  console.log("test"+legendlabel);
                   $('#' + arcapi.chartId() + ' .viz-base-legend-g.small-legend').children('text')[c].innerHTML = d[0] + ' (' + d3.format(',')(d[1]) + ')';  
                }
            }
        });
    };
    
    return f;
}();

Thank you Shaun! You are a gentleman and a scholar.
The CSS did it for me. I was missing the !important in my trials :smile: