Qurve — High-Performance Canvas Charts for React

Primitives

<Chart />implemented

The root container. Manages canvas context and coordinates all child components.

<Line />implemented

Line series with support for linear, monotone, and step interpolation.

<Bar />implemented

Vertical bars with grouping, stacking (stackId), rounded corners, and tooltip support.

<Area />implemented

Filled area series with stacking, custom fill opacity, and per-series tooltip formatting.

<ResponsiveContainer />implemented

Auto-sizes charts to the parent element via ResizeObserver.

<Legend />implemented

Built-in legend with click-to-toggle visibility for line, bar, and area series.

<Pie />implemented

Pie and donut charts with palette-driven slices, outside labels, connector lines, and tooltip hit-testing.

<Scatter />implemented

Point-based plots with custom x/y keys, tooltip payloads, and legend toggling.

<Brush />implemented

Interactive range selector with draggable window and handles for x-range zooming.

Axesimplemented

Axis components with automatic tick generation and customizable formatting.

<CartesianGrid />implemented

Reference grid lines for easier data reading. Configurable stroke patterns.

<Tooltip />implemented

Interactive tooltips with crosshair cursor and value display on hover.

Features

Recharts-compatible API

Drop-in replacement with the same component names and props. Migration is painless.

Canvas Rendering

GPU-accelerated drawing. Handles 100k+ data points without breaking a sweat.

Auto-scaling

Smart domain calculation from your data. No manual configuration needed.

High-DPI Support

Crisp rendering on Retina displays with automatic DPR detection.

TypeScript First

Full type safety with detailed prop interfaces and generics.

SSR Compatible

Works seamlessly with Next.js and other server-side rendering frameworks.

Examples

Stock Dashboard

Line + CartesianGrid + Tooltip + Brush — 90 data points

<Chart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="day" />
  <YAxis />
  <Line
    dataKey="price"
    type="monotone"
    stroke="#60a5fa"
    strokeWidth={2}
    dot={false}
    activeDot={{ r: 5 }}
    name="AAPL"
  />
  <Tooltip />
  <Brush />
</Chart>

Sales Overview

Bar + Line + Legend + Tooltip — revenue vs target

<Chart data={data}>
  <CartesianGrid strokeDasharray="3 3" />
  <XAxis dataKey="month" />
  <YAxis />
  <Bar
    dataKey="revenue"
    fill="#60a5fa"
    radius={4}
    tooltipName="Revenue"
  />
  <Line
    dataKey="target"
    stroke="#f97316"
    strokeWidth={2}
    name="Target"
  />
  <Legend />
  <Tooltip />
</Chart>

Performance

Canvas rendering unlocks a fundamentally different performance ceiling. Open the dedicated comparison page to inspect Qurve and Recharts side-by-side on the same datasets.

Open comparison page