> For the complete documentation index, see [llms.txt](https://archai.gitbook.io/archai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://archai.gitbook.io/archai/create-your-own-ai/markdown-components-in-arch-ai-chats/plotly-charts.md).

# 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.

<figure><img src="/files/vfOL7d4Z177UdA56BO2A" alt="" width="563"><figcaption></figcaption></figure>

### 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}'
/>
```

<figure><img src="/files/cOmyd5scbP9xFnUfNClG" alt="" width="563"><figcaption></figcaption></figure>

#### **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}'
/>
```

<figure><img src="/files/UFucL2HArBhl3PnDI1Jq" alt="" width="462"><figcaption></figcaption></figure>

#### **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}'
/>
```

<figure><img src="/files/dAjE4C3pIZwWBdL3voaI" alt="" width="563"><figcaption></figcaption></figure>

#### **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}'
/>
```

<figure><img src="/files/SrazxatQLbbDr2tmCrS5" alt="" width="563"><figcaption></figcaption></figure>

#### **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}'
/>
```

<figure><img src="/files/YszzQkgGThuPYxSgJw4q" alt="" width="563"><figcaption></figcaption></figure>

**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](https://plotly.com/javascript/) for additional configuration options
* The component renders fully interactive charts that users can manipulate

{% hint style="info" %}
You can ask the agent to generate charts dynamically based on data analysis or create custom visualizations for specific datasets.
{% endhint %}