page.mdx

Interactive charts

E2B also allows you to create interactive charts with custom styling.

E2B automatically detects charts when executing Python code with runCode() in JavaScript or run_code() in Python. The Python code must include Matplotlib charts.

When a chart is detected, E2B sends the data of the chart back to the client. You can access the chart in the execution.results array where each item is a Result object with the chart property.

Try out [AI Data Analyst](https://github.com/e2b-dev/ai-analyst/) - a Next.js app that uses E2B to create interactive charts.

Here's a simple example of bar chart:

import { Sandbox, BarChart } from '@e2b/code-interpreter'

const code = `
import matplotlib.pyplot as plt

# Prepare data
authors = ['Author A', 'Author B', 'Author C', 'Author D']
sales = [100, 200, 300, 400]

# Create and customize the bar chart
plt.figure(figsize=(10, 6))
plt.bar(authors, sales, label='Books Sold', color='blue')
plt.xlabel('Authors')
plt.ylabel('Number of Books Sold')
plt.title('Book Sales by Authors')

# Display the chart
plt.tight_layout()
plt.show()
`

const sandbox = await Sandbox.create()
const result = await sandbox.runCode(code)
const chart = result.results[0].chart as BarChart

console.log('Type:', chart.type)
console.log('Title:', chart.title)
console.log('X Label:', chart.x_label)
console.log('Y Label:', chart.y_label)
console.log('X Unit:', chart.x_unit)
console.log('Y Unit:', chart.y_unit)
console.log('Elements:', chart.elements)

from e2b_code_interpreter import Sandbox

code = """
import matplotlib.pyplot as plt

# Prepare data
authors = ['Author A', 'Author B', 'Author C', 'Author D']
sales = [100, 200, 300, 400]

# Create and customize the bar char
plt.figure(figsize=(10, 6))
plt.bar(authors, sales, label='Books Sold', color='blue')
plt.xlabel('Authors')
plt.ylabel('Number of Books Sold')
plt.title('Book Sales by Authors')

# Display the chart
plt.tight_layout()
plt.show()
"""

sandbox = Sandbox.create()
execution = sandbox.run_code(code)
chart = execution.results[0].chart

print('Type:', chart.type)
print('Title:', chart.title)
print('X Label:', chart.x_label)
print('Y Label:', chart.y_label)
print('X Unit:', chart.x_unit)
print('Y Unit:', chart.y_unit)
print('Elements:')
for element in chart.elements:
    print('\n  Label:', element.label)
    print('  Value:', element.value)
    print('  Group:', element.group)

The code above will output the following:

Type: bar
Title: Book Sales by Authors
X Label: Authors
Y Label: Number of Books Sold
X Unit: null
Y Unit: null
Elements: [
  {
    label: "Author A",
    group: "Books Sold",
    value: 100,
  }, {
    label: "Author B",
    group: "Books Sold",
    value: 200,
  }, {
    label: "Author C",
    group: "Books Sold",
    value: 300,
  }, {
    label: "Author D",
    group: "Books Sold",
    value: 400,
  }
]

Type: ChartType.BAR
Title: Book Sales by Authors
X Label: Authors
Y Label: Number of Books Sold
X Unit: None
Y Unit: None
Elements:

  Label: Author A
  Value: 100.0
  Group: Books Sold

  Label: Author B
  Value: 200.0
  Group: Books Sold

  Label: Author C
  Value: 300.0
  Group: Books Sold

  Label: Author D
  Value: 400.0
  Group: Books Sold

You can send this data to your frontend to create an interactive chart with your favorite charting library.

---

Supported intertactive charts

The following charts are currently supported:

• Line chart
• Bar chart
• Scatter plot
• Pie chart
• Box and whisker plot

{/* The following charts are currently supported:

• Line chart
• Bar chart
• Scatter plot
• Pie chart
• Box and whisker plot

Line chart

Bar chart

Scatter plot

Pie chart

Box and whisker plot */}