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
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…