Code Interpreter
Charts & Visualization
Generate charts and visualizations in the Code Interpreter
Charts & Visualization
The Code Interpreter can generate charts and visualizations using matplotlib, plotly, and other Python charting libraries. Chart output is automatically captured and returned as base64-encoded images in the execution results.
Matplotlib Charts
Matplotlib is pre-installed. Any chart rendered with plt.show() is captured as a PNG image.
import { CodeInterpreter } from "vibengine";
const sandbox = await CodeInterpreter.create({
apiKey: process.env.VE_API_KEY,
});
const execution = await sandbox.runCode(`
import matplotlib.pyplot as plt
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
revenue = [12000, 15500, 13200, 17800, 21000, 19500]
plt.figure(figsize=(10, 6))
plt.bar(months, revenue, color="#4F46E5")
plt.title("Monthly Revenue - 2026 H1")
plt.ylabel("Revenue ($)")
plt.xlabel("Month")
plt.tight_layout()
plt.show()
`);
// The chart is available as a base64-encoded PNG
const chart = execution.results[0];
console.log(chart.png); // "iVBORw0KGgo..."
await sandbox.kill();import os
from vibengine import CodeInterpreter
sandbox = CodeInterpreter.create(api_key=os.environ["VE_API_KEY"])
execution = sandbox.run_code("""
import matplotlib.pyplot as plt
months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun"]
revenue = [12000, 15500, 13200, 17800, 21000, 19500]
plt.figure(figsize=(10, 6))
plt.bar(months, revenue, color="#4F46E5")
plt.title("Monthly Revenue - 2026 H1")
plt.ylabel("Revenue ($)")
plt.xlabel("Month")
plt.tight_layout()
plt.show()
""")
chart = execution.results[0]
print(chart.png) # "iVBORw0KGgo..."
sandbox.kill()Understanding the Results Array
Each call to plt.show() produces one entry in the results array. Each result has a png field containing the base64-encoded image.
const execution = await sandbox.runCode(`
import matplotlib.pyplot as plt
# First chart
plt.figure()
plt.plot([1, 2, 3, 4], [10, 20, 25, 30])
plt.title("Chart 1: Line")
plt.show()
# Second chart
plt.figure()
plt.pie([35, 25, 20, 20], labels=["A", "B", "C", "D"])
plt.title("Chart 2: Pie")
plt.show()
`);
console.log(execution.results.length); // 2
console.log(execution.results[0].png); // Base64 of line chart
console.log(execution.results[1].png); // Base64 of pie chartexecution = sandbox.run_code("""
import matplotlib.pyplot as plt
# First chart
plt.figure()
plt.plot([1, 2, 3, 4], [10, 20, 25, 30])
plt.title("Chart 1: Line")
plt.show()
# Second chart
plt.figure()
plt.pie([35, 25, 20, 20], labels=["A", "B", "C", "D"])
plt.title("Chart 2: Pie")
plt.show()
""")
print(len(execution.results)) # 2
print(execution.results[0].png) # Base64 of line chart
print(execution.results[1].png) # Base64 of pie chartSaving Charts to Files
You can save charts to the sandbox filesystem and download them later.
await sandbox.runCode(`
import matplotlib.pyplot as plt
import numpy as np
x = np.linspace(0, 10, 100)
plt.figure(figsize=(10, 6))
plt.plot(x, np.sin(x), label="sin(x)")
plt.plot(x, np.cos(x), label="cos(x)")
plt.legend()
plt.title("Trigonometric Functions")
plt.savefig("/home/user/trig_chart.png", dpi=150)
`);
// Download the saved file
const fileBytes = await sandbox.downloadFile("/home/user/trig_chart.png");sandbox.run_code("""
import matplotlib.pyplot as plt
import numpy as np
x = np.linspace(0, 10, 100)
plt.figure(figsize=(10, 6))
plt.plot(x, np.sin(x), label="sin(x)")
plt.plot(x, np.cos(x), label="cos(x)")
plt.legend()
plt.title("Trigonometric Functions")
plt.savefig("/home/user/trig_chart.png", dpi=150)
""")
# Download the saved file
file_bytes = sandbox.download_file("/home/user/trig_chart.png")Plotly Interactive Charts
Install plotly for interactive visualizations. Plotly charts are captured as static images in the results.
const execution = await sandbox.runCode(`
!pip install plotly kaleido
import plotly.express as px
import pandas as pd
df = pd.DataFrame({
"city": ["New York", "London", "Tokyo", "Paris", "Sydney"],
"population": [8.3, 8.9, 13.9, 2.1, 5.3],
"area_km2": [783, 1572, 2194, 105, 12368],
})
fig = px.scatter(
df, x="area_km2", y="population",
text="city", size="population",
title="City Population vs Area",
)
fig.update_traces(textposition="top center")
fig.show()
`);
// Plotly chart captured as image
console.log(execution.results[0].png);execution = sandbox.run_code("""
!pip install plotly kaleido
import plotly.express as px
import pandas as pd
df = pd.DataFrame({
"city": ["New York", "London", "Tokyo", "Paris", "Sydney"],
"population": [8.3, 8.9, 13.9, 2.1, 5.3],
"area_km2": [783, 1572, 2194, 105, 12368],
})
fig = px.scatter(
df, x="area_km2", y="population",
text="city", size="population",
title="City Population vs Area",
)
fig.update_traces(textposition="top center")
fig.show()
""")
print(execution.results[0].png)The kaleido package is required for Plotly to export charts as static images. Make sure to install it alongside plotly.
Displaying Charts in a Web App
The base64 PNG output can be embedded directly in HTML or passed to a frontend framework.
<!-- Example: rendering the chart in an img tag -->
<img src="data:image/png;base64,{execution.results[0].png}" alt="Chart" />// React example
function ChartDisplay({ base64Png }) {
return (
<img
src={`data:image/png;base64,${base64Png}`}
alt="Generated chart"
className="w-full rounded-lg shadow"
/>
);
}