Interactive charts in Chainlit

Chainlit has native support for Plotly charts. We can send interactive visualizations directly in the chat that users can hover, zoom, and pan.

Charts in chat

How Plotly charts are embedded in Chainlit messages

app.py
python
import plotly.graph_objects as go
import json

# After getting final_result with graph_json...
if final_result.get('needs_graph') and final_result.get('graph_json'):
    # Parse JSON back to Plotly figure
    fig = go.Figure(json.loads(final_result['graph_json']))

    # Create Chainlit Plotly element
    graph_element = cl.Plotly(
        name=f"{final_result.get('graph_type', 'chart')}_visualization",
        figure=fig,
        display="inline"
    )

    # Send message with the chart element
    await cl.Message(
        content=f"**Interactive Visualization ({final_result.get('graph_type')} Chart)**\n"
                "Hover over the chart for details, zoom, and pan!",
        elements=[graph_element]
    ).send()

Send Plotly charts as interactive elements in Chainlit messages.

Validation checklist: Plotly in Chainlit checklist

Loading practice…

Timed quiz: Quick review

Loading practice…

You can now display interactive Plotly charts directly in the Chainlit chat. The full UI integration is complete.

Validation checklist: Chainlit UI checklist

Loading practice…