# Dash Leaflet Minicharts

**URL:** <https://community.plotly.com/t/dash-leaflet-minicharts/58239>\
**Category:** Dash Python\
**Tags:** show-and-tell\
**Created:** [November 8, 2021, 5:14pm UTC](https://community.plotly.com/t/dash-leaflet-minicharts/58239 "2021-11-08T17:14:25Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Emil](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/emil/32/31734_2.png) [@Emil](https://community.plotly.com/u/Emil)\
**Post date:** [November 8, 2021, 5:14pm UTC](https://community.plotly.com/t/dash-leaflet-minicharts/58239/1 "2021-11-08T17:14:25Z")

</div>

In `dash-leaflet==0.1.23` a new `Minichart` component has been contributed by @RenaudLN . It makes it easy to draw small, animated charts. I think it looks so cool, so I figured I would share it here 😃

![Peek 2021-11-08 18-16](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/4/e4b8a7da9ffd578742f29c166d36495ff6dde7e2.gif)

```auto
from dash import Dash, Output, Input, dcc
import dash_leaflet as dl

# Create example app.
app = Dash(update_title=None)
app.layout = dl.Map([
    dl.TileLayer(),
    dl.Minichart(lat=56.1780842, lon=10.1119354, type="bar", id="bar"),
    dl.Minichart(lat=55.6712474, lon=12.5237848, type="pie", id="pie"),
    dcc.Interval(id="trigger")
], style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"})
# Do animated updates (could also be normal callback, but clientside is more performant).
app.clientside_callback("""
function(n_intervals){
    const fakeData = () => [Math.random(), Math.random(), Math.random(), Math.random(), Math.random()]
    return [fakeData(), fakeData()]
}
""", [Output("bar", "data")], [Output("pie", "data")], Input("trigger", "n_intervals"))

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

```

[http://dash-leaflet.herokuapp.com/#minichart](http://dash-leaflet.herokuapp.com/#minichart)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [November 8, 2021, 6:18pm UTC](https://community.plotly.com/t/dash-leaflet-minicharts/58239/2 "2021-11-08T18:18:10Z")

</div>

Wow @Emil - so awesome 👏

---

<div class="post-metadata">

**Author:** ![matttob](https://avatars.discourse-cdn.com/v4/letter/m/ebca7d/32.png) [@matttob](https://community.plotly.com/u/matttob)\
**Post date:** [April 24, 2023, 6:20pm UTC](https://community.plotly.com/t/dash-leaflet-minicharts/58239/3 "2023-04-24T18:20:55Z")

</div>

Hi,

Thank you for all your work on dash leaflet, I am getting close to having minicharts working but I dont seem to be able to get the bars for example to scale with my data, in the example you give the data to the minichart in Javascript, I am trying to do it purely in Python like this for example:

mini\_chart\_out = [100,200, 300]

Output(‘bar\_mini’,‘data’)

I’m probably being really dumb but just wondering if I am missing a trick?

thanks very much

matt