# Charting Options in PI Desktop: What Visualization Features Are Available?

> Explore PI Desktop charting options. Discover how to integrate external libraries like Chart.js via the Agent Runtime for custom visualizations. Learn more today.

- Repository: [Lan/PI-Desktop](https://github.com/vastsa/PI-Desktop)
- Tags: feature-overview
- Published: 2026-09-12

---

**PI Desktop does not include built-in charting libraries, but exposes a plugin architecture via the Agent Runtime that allows developers to render custom charts using external libraries like Chart.js.**

The open-source repository `vastsa/PI-Desktop` is an AI-coding-assistant desktop client focused on conversational text and code rendering. If you are evaluating charting options in PI Desktop for data visualization, you should understand that the core codebase contains no native plotting components, relying instead on an extensible plugin system for any graphical output.

## Native Charting Capabilities

A comprehensive review of the source tree reveals that PI Desktop ships without embedded charting functionality. The UI-related packages—specifically `apps/desktop`, `packages/agent-runtime`, and `packages/shared`—contain only text-output handlers, sidecar communication protocols, and plugin-loading logic.

Searches across the repository for standard charting identifiers such as `chart`, `Chart`, `plot`, `recharts`, `chartjs`, and `plotly` return no matches. This confirms that no chart rendering engine is bundled with the application. The Electron-based frontend in `apps/desktop/` handles conversational rendering and status panels but lacks any native visualization components.

## Extending PI Desktop with Custom Charts

Because PI Desktop is extensible via **plugins**, developers can introduce charting capabilities by creating custom skills. The plugin system is managed through [`packages/agent-runtime/src/plugin-skills.ts`](https://github.com/vastsa/PI-Desktop/blob/main/packages/agent-runtime/src/plugin-skills.ts), which loads and registers skill modules at runtime.

### Plugin Architecture

The Agent Runtime provides a `defineSkill` utility (exported from `@pi-desktop/plugin-devkit`) that allows plugins to inject UI elements into the desktop pane. The skill's `run` method receives a `ui` object containing an `append` function, which mounts DOM elements into the application window. This mechanism enables third-party libraries to render visualizations within the PI Desktop interface.

### Chart.js Plugin Implementation Example

Below is a complete, runnable example demonstrating how to implement a line chart using Chart.js within a PI Desktop plugin. This pattern follows the official dev-kit conventions and references the `ui.append` helper provided by the runtime.

```typescript
// 📁 plugins/line-chart/index.ts
import { defineSkill } from '@pi-desktop/plugin-devkit';
import Chart from 'chart.js/auto';

// Skill that renders a chart when invoked
export default defineSkill({
  id: 'line-chart',
  name: 'Render Line Chart',
  description: 'Shows a simple line chart with sample data.',
  async run(_, { ui }) {
    // Create a container element for the chart
    const container = document.createElement('div');
    container.style.width = '500px';
    container.style.height = '300px';
    ui.append(container);            // <- `ui` is the host-provided render surface

    const canvas = document.createElement('canvas');
    container.appendChild(canvas);

    // Initialise Chart.js
    new Chart(canvas, {
      type: 'line',
      data: {
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
        datasets: [
          {
            label: 'Visits',
            data: [30, 45, 28, 60, 75],
            borderColor: '#4A90E2',
            backgroundColor: 'rgba(74,144,226,0.2)',
            fill: true,
          },
        ],
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
      },
    });

    return { status: 'ok' };
  },
});

```

**Key implementation details:**
- The `ui.append` method injects the container into the desktop's render surface
- The plugin creates a `<canvas>` element and initializes **Chart.js** with sample time-series data
- The skill metadata (`id`, `name`, `description`) registers the chart as an invocable skill in the UI's Skills panel

## Core Files and Architecture

Understanding these source files is essential for developing custom charting solutions:

- **[`packages/agent-runtime/src/plugin-skills.ts`](https://github.com/vastsa/PI-Desktop/blob/main/packages/agent-runtime/src/plugin-skills.ts)** – Core logic that orchestrates plugin loading and skill registration; the entry point for any chart-rendering functionality
- **[`packages/agent-runtime/src/plugin-skills.test.ts`](https://github.com/vastsa/PI-Desktop/blob/main/packages/agent-runtime/src/plugin-skills.test.ts)** – Test suite verifying the plugin-loading pipeline and runtime integration
- **`@pi-desktop/plugin-devkit`** – Development kit providing `defineSkill` and UI helpers (referenced in [`package.json`](https://github.com/vastsa/PI-Desktop/blob/main/package.json))
- **`apps/desktop/`** – Electron frontend that hosts the UI surface where plugins render output; contains no native chart code

## Summary

- PI Desktop contains **no native charting options** in its core distribution
- The codebase lacks references to Chart.js, Recharts, Plotly, or similar visualization libraries
- Developers must implement charting through the **plugin system** using `defineSkill` from `@pi-desktop/plugin-devkit`
- The `ui.append` method in the skill's `run` function provides the DOM injection point for external chart libraries
- Any charting implementation requires bundling the visualization library as a plugin dependency

## Frequently Asked Questions

### Does PI Desktop include built-in data visualization tools?

No. According to the source code analysis, PI Desktop does not ship with any built-in charting, graphing, or plotting capabilities. The UI is designed for text and code display only.

### How can I display charts in PI Desktop?

You must create a custom plugin using the `@pi-desktop/plugin-devkit`. The plugin can import any JavaScript charting library (such as Chart.js) and use the `ui.append` method provided in the skill's context to mount a canvas element into the application window.

### Which file handles plugin registration for chart rendering?

Plugin registration is managed in [`packages/agent-runtime/src/plugin-skills.ts`](https://github.com/vastsa/PI-Desktop/blob/main/packages/agent-runtime/src/plugin-skills.ts). This file contains the logic that loads skill definitions and exposes the UI helpers necessary for DOM-based chart rendering.

### Can I use React-based charting libraries like Recharts?

Yes. Since the plugin system allows injection of arbitrary DOM elements and supports modern JavaScript bundles, you can wrap React components or Recharts visualizations inside the plugin's `run` method and mount them using `ui.append`, provided you include the necessary transpilation steps in your plugin build configuration.