How to Reduce Gaps Between Charts in Spotfire

[spotfire_community]

In the case of cross tables, I can use IronPython to reduce the Row header width to 0, effectively hiding it.

(vis.As[CrossTablePlot]().RowHeaderWidths.Item[0]=0)

However, the gaps between charts remain visible, making it impossible to present them as a single, unified chart.

Even when I set the spacing to 0 in the visualization theme settings, the issue persists.

 

Is there a way to use CSS or JavaScript to make two charts appear as a single chart by eliminating the gaps between them?

(Note: Using transformations is not an option in this case.)

 

I want to combine the Origin chart and the Change chart into one without using a transformation.

 

Edited November 24 by spotfire_community

[Jose Leviaguirre]

Hello there, 

Assuming you are already using a custom Canvas styling to hide the borders between visualizations, here are a couple of ways:

Method 1 - Using annotations
There are different ways to do so. The simplest is to use an empty annotation and have it match the same color as your header. In this case I use a light yellow one and a white one to hide the extra height of the first annotation.

Method 2 - Using CSS
Another approach is to place a div element to fill that gap and apply a css rule like this:

#gapFiller {
    background: #fff9cf;
    height: 17px;
    width: 30px;
    position: fixed;
    top: 67px;
    left: 445px;
    z-index: 999;
    border: 1px dashed;
}

To ensure the annotation or div remains in the same place when resizing the window, the canvas must be set to fixed from file > document properties > canvas - size. 

IT will require some additional scripting to be able to reposition the div to the corresponding place when scrolling or resizing the window, but not sure if this is required in your case or the fixed canvas is sufficient.