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 (
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)



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) {
        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;

                   $('#' + 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: