Solana Liveline Chart

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

Stack

Next.js 16	App Router, Turbopack
Liveline	60fps canvas chart rendering
@solana-tracker/data-api	REST + WebSocket SDK
TanStack Query	Data fetching and caching
Tailwind CSS 4	Styling

Setup

git clone <repo-url> && cd solana-liveline-chart-example
cp .env.example .env   # add your API key
npm install
npm run dev

Open http://localhost:3000.

Environment

Variable	Required	Description
NEXT_PUBLIC_DATA_API_KEY	Yes	Solana Tracker API key
NEXT_PUBLIC_DATASTREAM_URL	No, used for live updates.	WebSocket URL (defaults to wss://datastream.solanatracker.io/your-datastream-key)

Structure

src/
├── app/
│   ├── layout.tsx              Root layout with providers
│   ├── page.tsx                Entry point
│   └── globals.css             Tailwind config
├── components/
│   ├── chart-page.tsx          Page layout, theme toggle, links
│   └── liveline-chart.tsx      Chart with live data streaming
├── providers/
│   ├── query-provider.tsx      TanStack Query client
│   └── token-provider.tsx      Token state and data fetching
└── services/
    └── api.ts                  SDK Client + Datastream singletons

License

MIT