ScopeView

Appearance

Examples ​

Try a chart with synthetic data, then copy the working example into your application. For help choosing a visualization and factory import, use the chart family guide.

Choose a chart type from the grouped menu. Docs opens the matching component example, preserving the selected type and its copyable mount code, configuration and input data. The selected type is also kept in the URL for reloads, links and browser navigation.

Docs

Loading interactive chart…

Compare hourly query and ingestion activity.

Hover to read · Click to select

Run an example ​

The source tabs use npm package imports and JSON modules. Use a build tool that resolves both, such as Vite. The steps below create a small local application with Node.js 24+.

Create a project ​

sh
mkdir scopeview-example
cd scopeview-example
sh
npm init -y
npm install @scopedb/scopeview
npm install --save-dev vite
sh
pnpm init
pnpm add @scopedb/scopeview
pnpm add --save-dev vite
sh
bun init -y
bun add @scopedb/scopeview
bun add --dev vite

Save the source files ​

Open Docs for the selected chart, or choose metric charts, trace timeline or flame graph. Copy all three source tabs from the same example into the project directory:

text
scopeview-example/
  index.html
  chart.js
  data.json
  package.json

Keep the module script and styles from index.html. chart.js imports data.json and exports the document; index.html registers and mounts its component. Vite resolves the package and JSON imports when serving or building the application.

Start and build ​

From the project directory, start the development server:

sh
npx vite --host 127.0.0.1
sh
pnpm exec vite --host 127.0.0.1
sh
bunx vite --host 127.0.0.1

Open the local HTTP URL printed by Vite. Opening index.html directly or serving these source files with a plain static server does not resolve the package and JSON imports.

To build the application and preview the resulting dist/ directory:

sh
npx vite build
npx vite preview --host 127.0.0.1
sh
pnpm exec vite build
pnpm exec vite preview --host 127.0.0.1
sh
bunx vite build
bunx vite preview --host 127.0.0.1

For an HTML file that includes its data and renderer and opens offline, use HTML export.

Copy and adapt ​

The gallery uses optional Web Components with built-in controls and details. Their source pages explain how to save the three example files and replace the supplied snapshot:

The same document families work with the headless API, where your application supplies the surrounding controls. Use HTML export for an offline chart page.