CanPlot

A high-performance React charting library built on Canvas.

Documentation

📚 View live examples and documentation

Features

- 🚀 High Performance: Built on Canvas for smooth rendering of large datasets
- 📊 Multiple Chart Types: Line, Bar, Scatter, Area, and Sparkline plots
- 🎨 Customizable: Flexible styling and configuration options
- 📈 Interactive: Built-in tooltips, crosshairs, and selection tools
- ⏱️ Time Series: First-class support for time-based data
- 📱 Responsive: Adapts to container size
- 🎯 Type Safe: Written in TypeScript with full type definitions

Installation

``bash
npm install @canplot/react


or

yarn add @canplot/react

or

pnpm add @canplot/react

or

bun add @canplot/react
`

Quick Start

`tsx
import { CanPlot, LinePlot } from '@canplot/react';

function MyChart() {
const data = [
{ x: 1, y: 30 },
{ x: 2, y: 45 },
{ x: 3, y: 60 },
{ x: 4, y: 35 },
{ x: 5, y: 70 },
];

const scales = [
{
id: 'x',
type: 'linear' as const,
axis: { position: 'bottom' as const, size: 40 },
origin: 'x' as const,
min: 0,
max: 10,
},
{
id: 'y',
type: 'linear' as const,
axis: { position: 'left' as const, size: 40 },
origin: 'y' as const,
min: 0,
max: 100,
},
];

return (
style={{ width: '100%', height: '400px' }}
configuration={{
padding: { bottom: 20, left: 20, right: 20, top: 20 },
scales,
}}
>
data={data}
xScaleId="x"
yScaleId="y"
style={{
strokeStyle: '#4c6ef5',
lineWidth: 2,
}}
/>

);
}
`

Chart Types

$3

`tsx
data={data}
xScaleId="x"
yScaleId="y"
style={{ strokeStyle: '#4c6ef5', lineWidth: 2 }}
/>
`

$3

`tsx
data={data}
xScaleId="x"
yScaleId="y"
barWidth={0.6}
xPositionOffset={0}
style={{ fillStyle: '#ff6b6b' }}
/>
`

$3

`tsx
data={data}
xScaleId="x"
yScaleId="y"
style={{
fillStyle: '#51cf66',
strokeStyle: '#37b24d',
lineWidth: 2,
}}
/>
`

$3

`tsx
data={data}
xScaleId="x"
yScaleId="y"
style={{
fillStyle: 'rgba(76, 110, 245, 0.2)',
strokeStyle: '#4c6ef5',
lineWidth: 2,
}}
/>
`

Interactions

$3

`tsx

xScaleId="x"
data={[
{
seriesId: 'series1',
yScaleId: 'y',
points: data,
},
]}
renderTooltip={(state) => {
if (!state || state.points[0].y === null) return null;
return (



);
}}
/>

`

$3

`tsx



`

$3

`tsx

onSelect={(selection) => {
console.log('Selected area:', selection);
}}
/>

`

Time Series

`tsx
const startDate = new Date('2024-01-01T00:00:00Z');

const scales = [
{
id: 'x',
type: 'time' as const,
axis: { position: 'bottom' as const, size: 40 },
origin: 'x' as const,
min: startDate.getTime(),
max: startDate.getTime() + 30 24 60 60 1000,
timeZone: 'UTC',
},
// ... y scale
];

const data = Array.from({ length: 30 }, (_, i) => ({
x: startDate.getTime() + i 24 60 60 1000,
y: Math.random() * 100,
}));
`

API Reference

$3

- CanPlot: Main container component
- LinePlot: Renders line charts
- BarPlot: Renders bar charts
- ScatterPlot: Renders scatter plots
- AreaPlot: Renders area charts
- SparklinePlot: Renders compact sparkline charts
- ChartAreaInteractions: Container for interactive features
- TooltipsX: Adds tooltips based on X-axis position
- Crosshair: Adds crosshair cursor
- SelectBox: Adds box selection
- AxisOverlay: Custom axis rendering

$3

Full TypeScript type definitions are included.

Troubleshooting

$3

If you encounter this error:

1. Install React type definitions:
`bash
npm install --save-dev @types/react @types/react-dom
`

2. Check your tsconfig.json:
`json
{
"compilerOptions": {
"moduleResolution": "bundler", // or "node16", "nodenext"
"esModuleInterop": true,
"skipLibCheck": false
}
}
`

3. Clear cache and reinstall:
`bash
rm -rf node_modules/.cache
npm install
``

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Repository

https://github.com/jedzej/canplot