# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://archai.gitbook.io/archai/create-your-own-ai/markdown-components-in-arch-ai-chats/plotly-charts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.