Make legend horizontal and reduce the size in Plotly Dash

Question

I am trying to make the attached legend horizontal and smaller in size but it's not working. Also if you see the Plot is hidden below the legend. (Some states are not visible) How can I set that to floating? So that all the US States can be seen clearly and legend is moved to bottom right horizontally.
The code I tried is:

fig.update_layout(
        margin=dict(
            l=0,
            r=0,
            b=0,
            t=0,
            pad=4,
            autoexpand=True
        ),
        legend=dict(
            orientation="h", # changing to "v" also gives same result.
            yanchor="bottom",
            y=1.02,
            xanchor="right",
            x=1
        )
    )

I also tried the below code: ( Now commented because only one legend was working fine with this, It overrides the above code snippet.)

fig.update_coloraxes(
        cauto=True,
        colorbar_yanchor="bottom",
        colorbar_y=0,
        colorbar_xanchor="right",
        colorbar_x=1,
        colorbar_orientation="h",
        colorbar_title_text="No. of Disconnection",
        colorbar_len = 0.6
    )

The above code changes the legend only for the main figure. I have two px.choropleth_mapbox() plots in one figure by adding traces. ( In the attached figure, one is "No Data" plot legend and another is "Number of Disconnections" legend.)

Thanks!