Plotly Charts
The MarkdownComponentPlotlyChart component allows you to create interactive charts and visualizations using Plotly.js library within chat messages. This component supports a wide variety of chart types including line plots, bar charts, scatter plots, heatmaps, and more.
Syntax
<MarkdownComponentPlotlyChart
dataJSON='[{"x":[1,2,3],"y":[2,6,3],"type":"scatter","mode":"lines+markers","marker":{"color":"red"}},{"type":"bar","x":[1,2,3],"y":[2,5,3]}]'
layoutJSON='{"width":320,"height":240,"title":{"text":"A Fancy Plot"}}'
/>Parameters
dataJSON: A JSON string containing an array of Plotly data objects. Each object represents a trace (data series) in the chart
layoutJSON: A JSON string containing the Plotly layout configuration object that controls the chart's appearance, sizing, and styling
Data Configuration
The dataJSON parameter accepts an array of trace objects. Each trace can have different properties depending on the chart type:
Common Properties:
type: Chart type (e.g., "scatter", "bar", "line", "pie", "histogram", "heatmap")
x: Array of x-axis values
y: Array of y-axis values
name: Legend label for the trace
mode: For scatter plots ("lines", "markers", "lines+markers")
marker: Styling options for markers (color, size, symbol)
line: Styling options for lines (color, width, dash)
Layout Configuration
The layoutJSON parameter controls the overall chart appearance:
Common Layout Properties:
title: Chart title configuration
width: Chart width in pixels
height: Chart height in pixels
xaxis: X-axis configuration (title, range, tick settings)
yaxis: Y-axis configuration (title, range, tick settings)
showlegend: Whether to display the legend
margin: Chart margins
bgcolor: Background color
Examples
Line Chart
<MarkdownComponentPlotlyChart
dataJSON='[{"x":[1,2,3,4,5],"y":[2,4,3,5,6],"type":"scatter","mode":"lines+markers","name":"Sales","line":{"color":"blue","width":3}}]'
layoutJSON='{"title":{"text":"Monthly Sales Trend"},"xaxis":{"title":"Month"},"yaxis":{"title":"Sales ($)"},"width":500,"height":300}'
/>
Bar Chart
<MarkdownComponentPlotlyChart
dataJSON='[{"x":["Jan","Feb","Mar","Apr"],"y":[20,14,23,18],"type":"bar","marker":{"color":"green"}}]'
layoutJSON='{"title":{"text":"Quarterly Revenue"},"width":400,"height":300}'
/>
Multiple Series
<MarkdownComponentPlotlyChart
dataJSON='[{"x":["Q1","Q2","Q3","Q4"],"y":[100,120,140,110],"type":"bar","name":"2023","marker":{"color":"blue"}},{"x":["Q1","Q2","Q3","Q4"],"y":[90,130,150,120],"type":"bar","name":"2024","marker":{"color":"red"}}]'
layoutJSON='{"title":{"text":"Yearly Comparison"},"barmode":"group","width":500,"height":350}'
/>
Pie Chart
<MarkdownComponentPlotlyChart
dataJSON='[{"labels":["Desktop","Mobile","Tablet"],"values":[45,35,20],"type":"pie","marker":{"colors":["#FF6B6B","#4ECDC4","#45B7D1"]}}]'
layoutJSON='{"title":{"text":"Traffic Sources"},"width":400,"height":400}'
/>
Scatter Plot with Custom Styling
<MarkdownComponentPlotlyChart
dataJSON='[{"x":[1,2,3,4,5],"y":[10,11,12,13,14],"type":"scatter","mode":"markers","marker":{"size":[20,30,40,50,60],"color":[1,2,3,4,5],"colorscale":"Viridis","showscale":true}}]'
layoutJSON='{"title":{"text":"Bubble Chart"},"xaxis":{"title":"X Values"},"yaxis":{"title":"Y Values"},"width":500,"height":400}'
/>
Usage Notes
All JSON strings must be properly escaped and formatted
Interactive features like zoom, pan, and hover are automatically enabled
Colors can be specified using hex codes, RGB values, or named colors
For complex visualizations, refer to the Plotly.js documentation for additional configuration options
The component renders fully interactive charts that users can manipulate
Last updated