# Interactive charts (/docs/code-interpreting/create-charts-visualizations/interactive-charts)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1430 · updated: 2026-07-30 -->
Related: [Static charts](/docs/code-interpreting/create-charts-visualizations/static-charts.md), [Pre-installed libraries](/docs/code-interpreting/analyze-data-with-ai/pre-installed-libraries.md)

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.

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

Here's a simple example of bar chart:

<CodeGroup>
  <CodeBlockTabs defaultValue="JavaScript & TypeScript" groupId="javascript-typescript+python">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="JavaScript & TypeScript">
        JavaScript & TypeScript
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Python">
        Python
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="JavaScript & TypeScript">
      ```js  
      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)
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Python">
      ```python  
      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)
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</CodeGroup>

The code above will output the following:

<CodeGroup>
  <CodeBlockTabs defaultValue="JavaScript & TypeScript" groupId="javascript-typescript+python">
    <CodeBlockTabsList>
      <CodeBlockTabsTrigger value="JavaScript & TypeScript">
        JavaScript & TypeScript
      </CodeBlockTabsTrigger>

      <CodeBlockTabsTrigger value="Python">
        Python
      </CodeBlockTabsTrigger>
    </CodeBlockTabsList>

    <CodeBlockTab value="JavaScript & TypeScript">
      ```bash  
      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,
        }
      ]
      ```
    </CodeBlockTab>

    <CodeBlockTab value="Python">
      ```bash  
      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
      ```
    </CodeBlockTab>
  </CodeBlockTabs>
</CodeGroup>

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

***

## Supported intertactive charts [#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](#line-chart)
  - [Bar chart](#bar-chart)
  - [Scatter plot](#scatter-plot)
  - [Pie chart](#pie-chart)
  - [Box and whisker plot](#box-and-whisker-plot)


  ## Line chart

  ## Bar chart

  ## Scatter plot

  ## Pie chart

  ## Box and whisker plot */}