Solana Dither Kit Chart

Real-time Solana price charts built with dither-kit, the Solana Tracker Data API SDK, and Next.js.

A sibling example to solana-liveline-chart-example — same Data API + Datastream pipeline, composable dithered charts instead of Liveline.

Stack

Next.js 16	App Router, Turbopack
next-ws	App Router WebSocket routes (proxies Datastream)
dither-kit	Composable dithered area / line charts
@solana-tracker/data-api	REST + WebSocket SDK
TanStack Query	Data fetching and caching
Tailwind CSS 4 + shadcn/ui	Styling / component host for dither-kit

Setup

git clone https://github.com/solanatracker/solana-ditherkit-chart-example.git
cd solana-ditherkit-chart-example
cp .env.example .env   # add your keys
npm install            # runs `next-ws patch` via prepare
npm run dev

Open http://localhost:3000.

Note: Live streaming needs a long-lived Node server (next dev / next start). next-ws is not compatible with serverless hosts like Vercel.

Environment

Variable	Required	Public?	Description
NEXT_PUBLIC_DATA_API_KEY	Yes	Yes	Solana Tracker API key for REST chart/token data
DATASTREAM_URL	No — needed for live updates (Premium+)	No (server-only)	Full Datastream WebSocket URL, e.g. wss://datastream.solanatracker.io/your-datastream-key
NEXT_PUBLIC_API_BASE	No	Yes	Override Data API base (default https://data.solanatracker.io)

The browser connects to /ws on this app. That route (via next-ws) proxies to DATASTREAM_URL, so the Datastream key never ships in the client bundle.

Without DATASTREAM_URL, historical candles still load; the live tip will not stream.

Structure

src/
├── app/
│   ├── ws/route.ts             Private WS proxy (next-ws → DATASTREAM_URL)
│   ├── layout.tsx              Root layout with providers
│   ├── page.tsx                Entry point
│   └── globals.css             Tailwind + shadcn theme
├── components/
│   ├── chart-page.tsx          Page layout, theme toggle, links
│   ├── dither-chart.tsx        Chart + candle-aligned live streaming
│   ├── series-stroke.tsx       Crisp SVG stroke over the dither fill
│   └── dither-kit/             Installed via @dither-kit/cli
├── providers/
│   ├── query-provider.tsx      TanStack Query client
│   └── token-provider.tsx      Token state and data fetching
└── services/
    ├── api.ts                  Data API Client singleton
    └── datastream.ts           Browser Datastream → /ws

What it demonstrates

• Historical OHLCV from the Data API, windowed by 1s / 1m / 5m / 15m / 1h / 4h / 1d
• Live price via Datastream through a private next-ws proxy, snapped to the active candle interval
• dither-kit AreaChart / LineChart with bloom, sparkline, avatar, buttons, and a blue gradient wash
• Price-domain zoom (dither-kit’s y-scale includes 0, so values are offset for a readable path)

dither-kit

Charts are installed from the tripwire registry into src/components/dither-kit/ (see dither-kit.json lockfile):

npx @dither-kit/cli add area-chart button avatar gradient

Requires a shadcn project (components.json). Re-run the CLI to update components.

License

MIT