Modifying site-wide custom styles

To edit the existing site-wide custom styles, follow these steps.

In the Manage Custom Styles window, click the Pencil icon next to the custom style you want to edit.

In this case, we are editing the custom style DarkBlueTable.

In the Custom Style: DarkBlueTable window, make the necessary changes, and then click Save.

You can also rename the style to DarkBlueTableBar.

In this example, we clicked the Javascript tab, and added some code to convert the last aggregate column to a proportionally sized horizontal bar.

return {
            version: "1",
            
            afterDraw: function() {
            var d = arcapi.dataResult();
            var rows = d.rows();
            var aggColIndex = -1;
            d.columns().forEach(function(col) {
            if (col.colproperty() == 2) {
            aggColIndex = col.colindex();
            }
            })
            
            if (aggColIndex < 0) {
            return;
            }
            
            console.log(aggColIndex);
            var extent = d3.extent(rows, function(row) {
            return +row[aggColIndex];
            });
            
            var scale = d3.scale.linear()
            .domain(extent)
            .range([5, 80]);
            
            console.log(extent);
            d3.selectAll("#" + arcapi.chartId() + " .table tbody tr :nth-child(" + (aggColIndex + 1) + ")")
            .text("")
            .append("div")
            .style("background-color", "black")
            .style("height", "15px")
            .style("width", function(d, i) {
            var m = +rows[i][aggColIndex];
            var w = scale(m);
            return w + "px";
            });
            }
            };

The resultant changes in the table visual.

Note also that because we changed the name of an existing custom style to DarkBlueTableBar, there is a corresponding update in the Manage Custom Styles window.