I'm buiding an application in dash that contains a map. This map is build using the dash-leaflet lib. I would like to have the colorbar displayed horizontally instead of vertically, is it possible and if yes what should I add to my code ?

import dash_leaflet as dl
from dash import Dash

colorscale = ['red', 'yellow', 'green', 'blue', 'purple']  # rainbow
app = Dash()
app.layout = dl.Map([
    dl.TileLayer(),
    dl.Colorbar(
        colorscale=colorscale,
        width=20,
        height=200,
        min=0,
        max=50,
        position="bottomleft"
    )
], center=[56, 10], zoom=6,  style={'height': '100vh'})

if __name__ == "__main__":
    app.run_server()

I'm buiding an application in dash that contains a map. This map is build using the dash-leaflet lib. I would like to have the colorbar displayed horizontally instead of vertically, is it possible and if yes what should I add to my code ?

import dash_leaflet as dl
from dash import Dash

colorscale = ['red', 'yellow', 'green', 'blue', 'purple']  # rainbow
app = Dash()
app.layout = dl.Map([
    dl.TileLayer(),
    dl.Colorbar(
        colorscale=colorscale,
        width=20,
        height=200,
        min=0,
        max=50,
        position="bottomleft"
    )
], center=[56, 10], zoom=6,  style={'height': '100vh'})

if __name__ == "__main__":
    app.run_server()

• python
• plotly-dash
• dash-leaflet

1 Answer 1

The lib is more clever than I thought, simply set a bigger width than height values and the colorbar will become horizontal:

import dash_leaflet as dl
from dash import Dash

colorscale = ['red', 'yellow', 'green', 'blue', 'purple']  # rainbow
app = Dash()
app.layout = dl.Map([
    dl.TileLayer(),
    dl.Colorbar(
        colorscale=colorscale,
        width=200,
        height=20,
        min=0,
        max=50,
        position="bottomleft"
    )
], center=[56, 10], zoom=6,  style={'height': '100vh'})

if __name__ == "__main__":
    app.run_server()