Playground — Realtime Bar Chart — Semiotic

Home · Getting Started · Charts · Features · Playground

This page requires JavaScript for interactive chart demos.

AI / Machine-readable docs: llms.txt · llms-full.txt · CLAUDE.md · schema.json · API Reference · Examples

View on GitHub · npx semiotic-ai for CLI access

Machine-readable page content

Canonical: https://semiotic.nteract.io/playground/realtime-bar-chart

Realtime Bar / Swarm Playground

Stacked time bars and swarm plots answer different questions about the same data stream. Time bars aggregate incoming points into bins — great for dashboards where you want throughput, error rates, or distribution summaries at a glance. Switch to a swarm when you need to see every individual data point: each dot sits at its exact (time, value) coordinate, revealing outliers, clusters, and gaps that binning would hide. For the "Server Latency" dataset, bars show total request volume per bin stacked by endpoint, while swarm shows each request's latency individually, color-coded by endpoint.

Chart Type:

Data Source:

Bars

Bin Size (ms)

Fill Color

#007bff

Bar Gap

Data

Buffer Size

Layout

Direction

Show Axes

Interaction

Enable Hover

Generated Code

JSX

import { RealtimeHistogram } from "semiotic" import { useRef } from "react" const chartRef = useRef() // Push individual data points chartRef.current.push({ time: Date.now(), value: 42, category: "GET" }) <RealtimeHistogram ref={chartRef} timeAccessor="time" valueAccessor="value" categoryAccessor="category" colors={{ GET: "#007bff", POST: "#28a745", DELETE: "#dc3545" }} />