@glyx-dev/charts

Line, area, bar, and pie/donut charts drawn on the GPU via the Canvas 2D path API (fill/stroke/arc). No DOM, no SVG. Charts redraw only when their props change, so they cost nothing while idle.

Install

npm install @glyx-dev/charts

Usage

import { LineChart, AreaChart, BarChart, PieChart } from '@glyx-dev/charts'
 
<LineChart data={[{ x: 'Jan', y: 12 }, { x: 'Feb', y: 19 }]} width={480} height={260} />
<AreaChart data={revenue} width={480} height={260} color="#4090F0" />
<BarChart  data={signups} width={480} height={260} />
<PieChart  data={[{ y: 30 }, { y: 50 }, { y: 20 }]} width={240} height={240} innerRadius={0.6} />

Each chart takes data (array of { x, y }, or { y, color? } for pie), width, height, plus optional color, showGrid, showLabels, showDots. Axis labels render with real glyphs via canvas fillText.

Tooltips

All four chart types show a hover tooltip by default — pass showTooltip={false} to disable it:

<LineChart data={data} width={480} height={260} showTooltip={false} />

There's no continuous "nearest point to the cursor" tracking — the framework's Pressable only exposes hover enter/leave, not a continuous move event. Instead, each chart places a small invisible hoverable region over every data point (line/area), bar (full bar width/height), or wedge (a marker near its visual center for pie/donut) — hovering directly over one shows its tooltip. This is discrete per-point hovering, not a cursor-following crosshair.

The tooltip shows the point's label and formatted value (_fmt-style — 1.2k, 3.4M, etc.) in a small floating box that flips to stay within the chart's bounds near the edges.

@glyx-dev/three @glyx-dev/table