Welcome to Vuer-Viz

Publication-quality visualization components for React, following matplotlib styling conventions.

Quick Start

Install Vuer-Viz using npm or pnpm:

npm install @vuer-ai/vuer-viz
# or
pnpm add @vuer-ai/vuer-viz

Your First Chart

Create a beautiful line chart in seconds:

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

const data = [
  {
    label: 'sin(x)',
    data: Array.from({ length: 50 }, (_, i) => {
      const x = (i / 50) * 2 * Math.PI;
      return { x, y: Math.sin(x) };
    }),
    color: '#0000ff',
  },
];

function App() {
  return (
    <LineChart
      series={data}
      title="My First Chart"
      xLabel="x (radians)"
      yLabel="y"
      grid
      legend
    />
  );
}

This creates a professional, publication-ready chart at 325x220px with:

• Matplotlib-style appearance
• Times New Roman font
• Configurable grid lines
• Major and minor tick marks
• Clean, minimal design

Key Features

• Publication Quality - Export-ready charts designed for papers and presentations
• Matplotlib Styling - Familiar conventions for data scientists and researchers
• Flexible Components - Line charts, bar charts, images, videos, and more
• Dark Mode - Beautiful appearance in both light and dark themes

What's Available

Chart Types

• Line Charts - Smooth curves with customizable series and legends
• Bar Charts - Vertical and horizontal bars with grid support
• Images - Display images with captions and positioning
• Videos - Video playback with pattern support
• Text - Markdown and code with syntax highlighting
• README - Render markdown files with TOC support
• ANSI Terminal - Terminal output with color codes

Guides

• Chart Layout - Understanding chart anatomy and customization
• Canvas Rendering - Fast rendering for large datasets
• Event Handling - Interactive charts with hover and click
• Markers & Ranges - Highlight regions and events
• Zoom & Pan - Interactive exploration

Next Steps