The Plotly class allows you to display a Plotly chart in the chatbot UI. This class takes a Plotly figure.

The advantage of the Plotly element over the Pyplot element is that it’s interactive (the user can zoom on the chart for example).

Attributes

name
str

The name of the chart to be displayed in the UI.

display
ElementDisplay

Determines how the chart element should be displayed in the UI. Choices are “side” (default), “inline”, or “page”.

size
ElementSize

Determines the size of the chart. Only works with display=“inline”. Choices are “small”, “medium” (default), or “large”.

figure
str

The plotly.graph_objects.Figure instance that you want to display.

Example

import plotly.graph_objects as go
import chainlit as cl


@cl.on_chat_start
async def start():
    fig = go.Figure(
        data=[go.Bar(y=[2, 1, 3])],
        layout_title_text="An example figure",
    )
    elements = [cl.Plotly(name="chart", figure=fig, display="inline")]

    await cl.Message(content="This message has a chart", elements=elements).send()