Timeline component

Dash Python
1

Hi dash plotly community:

Am wondering if there is a timeline component in plotly? Thanks

2

Hi @entropy_l

Have you checked out these chart types - Gantt charts in Python ?

3

@entropy_l

The Gantt charts are a great option. And if you were looking for a Timeline Component, check out https://www.dash-mantine-components.com/

This component is available, but it’s not yet in the Dash Mantine documentation. You can see it in the React Mantine docs: https://mantine.dev/core/timeline/

In the meantime, here is an example:

image

import dash_mantine_components as dmc
from dash import Dash

app = Dash(__name__)

app.layout = dmc.Timeline(
    [
        dmc.TimelineItem(
            "pip install dash-mantine-components",
        ),
        dmc.TimelineItem(
            [
                "Check out our  ",
                dmc.Anchor(
                    "documentation",
                    href="https://www.dash-mantine-components.com/",
                    underline=False,
                ),
            ],
        ),
        dmc.TimelineItem(
            [
                "Join our ",
                dmc.Anchor(
                    "Discord", href="https://discord.gg/KuJkh4Pyq5", underline=False
                ),
                " Community.",
            ],
        ),
        dmc.TimelineItem("Make something cool"),
        dmc.TimelineItem(
            "Share your app in show-and-tell!",
        ),
    ],
    active=3,
)


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

And just for fun, here is an example with icons:

image

import dash_mantine_components as dmc
from dash import Dash
from dash_iconify import DashIconify

app = Dash(__name__)


def make_icon(icon):
    return [
        dmc.ThemeIcon(
            radius="xl", variant="outline", children=[DashIconify(icon=icon, width=16)]
        )
    ]


app.layout = dmc.Timeline(
    [
        dmc.TimelineItem(
            "pip install dash-mantine-components",
            bullet=make_icon("akar-icons:circle-check"),
        ),
        dmc.TimelineItem(
            [
                "Check out our  ",
                dmc.Anchor(
                    "documentation",
                    href="https://www.dash-mantine-components.com/",
                    underline=False,
                ),
            ],
            bullet=make_icon("charm:rocket"),
        ),
        dmc.TimelineItem(
            [
                "Join our ",
                dmc.Anchor(
                    "Discord", href="https://discord.gg/KuJkh4Pyq5", underline=False
                ),
                " Community.",
            ],
            bullet=make_icon("fa-brands:discord"),
        ),
        dmc.TimelineItem("Make something cool", bullet=make_icon("carbon:face-cool")),
        dmc.TimelineItem(
            "Share your app in show-and-tell!",
            bullet=make_icon("twemoji:confetti-ball"),
        ),
    ],
    active=0,
)



if __name__ == "__main__":
    app.run_server()
5 Likes
4

@AnnMarieW thank you so much. I use dash mantine components a lot and did check there before posting here. I just tried, exactly what I am looking for. Thank you so much. It is great work!
@atharvakatre Thank you as well. It looks great. Cheers!

3 Likes