vuer-viz

Simple, canvas-based chart components for React.

Installation

pnpm add vuer-viz

Components

LineChart

Canvas-based line chart with support for multiple series.

import { LineChart } from '@vuer-ai/vuer-viz';

function App() {
  const data = [
    {
      label: 'Series A',
      color: '#3498db',
      data: [
        { x: 0, y: 10 },
        { x: 1, y: 15 },
        { x: 2, y: 13 },
        { x: 3, y: 17 },
        { x: 4, y: 20 },
      ],
    },
  ];

  return (
    <LineChart
      width={600}
      height={400}
      series={data}
      xLabel="X Axis"
      yLabel="Y Axis"
      title="My Line Chart"
    />
  );
}

Props

• width (number, required) - Canvas width in pixels
• height (number, required) - Canvas height in pixels
• series (LineChartSeries[], required) - Array of data series
• xLabel (string, optional) - X-axis label
• yLabel (string, optional) - Y-axis label
• title (string, optional) - Chart title
• backgroundColor (string, optional) - Background color (default: '#ffffff')

BarChart

Canvas-based bar chart with vertical or horizontal orientation.

import { BarChart } from '@vuer-ai/vuer-viz';

function App() {
  const data = [
    { label: 'A', value: 30 },
    { label: 'B', value: 50 },
    { label: 'C', value: 40 },
    { label: 'D', value: 70 },
  ];

  return (
    <BarChart
      width={600}
      height={400}
      data={data}
      orientation="vertical"
      color="#3498db"
      xLabel="Categories"
      yLabel="Values"
      title="My Bar Chart"
    />
  );
}

Props

• width (number, required) - Canvas width in pixels
• height (number, required) - Canvas height in pixels
• data (BarChartDataPoint[], required) - Array of data points
• orientation ('vertical' | 'horizontal', optional) - Bar orientation (default: 'vertical')
• color (string, optional) - Bar color (default: '#3498db')
• xLabel (string, optional) - X-axis label
• yLabel (string, optional) - Y-axis label
• title (string, optional) - Chart title
• backgroundColor (string, optional) - Background color (default: '#ffffff')

Example Data

Each component includes example data files:

• LineChart.example.ts - Sample data for line charts
• BarChart.example.ts - Sample data for bar charts

import { simpleLineData } from 'vuer-viz/dist/components/LineChart.example';
import { LineChart } from '@vuer-ai/vuer-viz';

function App() {
  return <LineChart width={600} height={400} series={simpleLineData} />;
}

Development

# Install dependencies
pnpm install

# Build library
pnpm build

# Type check
pnpm typecheck

License

MIT