Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Add borders to subplots using styles

I have the following graph which can dynamically add subplots and to distinguish between each subplot I add borders using the ‘mirror’ property of ‘xaxis’ setting it to ‘allticks’, and it works well for the subplots as seen in the image

The problem starts when I add the volume subplot since it goes on top of the candlesticks subplot but due to the mirror the line appears on the upper edge of the volume subplot which I don’t want to be visible

So the solution that I came up with was to remove the mirror by setting it to false and manually add the border to the rect elements of each subplot except the volume one using the following lines

document.getElementsByClassName('bglayer')[0].lastElementChild.style['stroke-width'] = 1
document.getElementsByClassName('bglayer')[0].lastElementChild.style['stroke'] = 'dimgrey'

It works but apparently there is a background routine that constantly rewrites the styles of the rec elements changing the stroke-width to 0 which I don’t understand in order to constantly refresh the recs so my next option was to add a class to the recs that I modify the boder with the following line

document.getElementsByClassName('bglayer')[0].lastElementChild.classList.add('rec-border')

But again it didn’t work, it doesn’t recognize the styles.

Could someone help me with this problem? any solution to add borders independently to subplots?

I have solved the problem by adding a shape that wraps the new layer to simulate a border as follows

Plotly.update(plotLayer, {}, {
                'xaxis2.anchor': 'y' + y,
                ['yaxis' + y]: {
                    type: 'linear',
                    ticks: 'outside',
                    color: 'white',
                    linecolor: 'dimgrey',
                    linewidth: 1,
                    showline: true,
                    showgrid: true,
                    gridcolor: '#444444',
                    gridwidth: 0.5,
                    showspikes: true,
                    spikecolor: '#888888',
                    spikethickness: -1,
                    spikedash: 'dash',
                    spikemode: 'across',
                    spikesnap: 'cursor',
                    side: 'right',
                    range: yRange[`y${y}`],
                    fixedrange: true,
                    zeroline: true,
                    zerolinecolor: 'dimgray',
                    scaleanchor: 'y1',
                    exponentformat: 'none',
                    visible: true,
                    tickformat: '.' + fixPrice + 'f'
                },
                ['shapes[' + plotLayer.layout.shapes.length + ']']: {
                    type: 'rect',
                    layer: 'below',
                    xref: 'paper',
                    yref: `y${y} domain`,
                    x0: 0,
                    x1: 1,
                    y0: 0,
                    y1: 1,
                    visible: true,
                    line: {
                        width: 1,
                        color: 'dimgray'
                    }
                }
            })

Thus leaving the result