VisionCharts

A modern, high-performance JavaScript charting library optimized for financial and economic data visualization.

✨ Features

🚀 Multi-Renderer Architecture

Canvas 2D for standard datasets (< 50K points)
WebGL for large datasets (50K+ points) with GPU acceleration
SVG fallback for maximum compatibility
Automatic renderer selection based on data size and browser capabilities

📊 Chart Types

Line Charts with customizable curves (linear, step, cardinal, monotone) and area fill capability
Bar Charts with grouped and stacked options
Panel Views for multi-dataset comparative analysis

📈 Technical Analysis

Moving Averages: Simple (SMA) and Exponential (EMA)
Bollinger Bands with configurable periods and standard deviations
Statistical Lines: Zero line, average line, median line
Recession Indicators with customizable periods and styling

🎨 Visual Components

Interactive Crosshairs with data point tooltips
Dynamic Legends with dataset management
Ending Labels for latest values
Grid System with major/minor lines
Custom Color Palettes with color picker integration

⚡ Performance & Compatibility

Browser Support Detection with capability reporting
Coordinate System Normalization across all renderers
Data Processing Pipeline with caching and optimization
Path Generation with curve smoothing and interpolation
Memory Management with efficient resource cleanup

🚀 Quick Start

Installation

# Via npm
npm install visioncharts

# Via CDN
<script type="module" src="https://unpkg.com/visioncharts@latest/dist/visioncharts.esm.js"></script>

Basic Usage

import { LineChart } from 'visioncharts';

// Create a line chart
const chart = new LineChart({
  container: '#my-chart',
  data: [{
    id: 'dataset-1',
    name: 'Stock Price',
    color: '#1468a8',
    data: [
      { x: new Date('2024-01-01'), y: 100 },
      { x: new Date('2024-01-02'), y: 105 },
      { x: new Date('2024-01-03'), y: 98 }
    ]
  }],
  options: {
    title: 'Stock Performance',
    xAxisName: 'Date',
    yAxisName: 'Price ($)',
    width: 800,
    height: 400
  }
});

// Render the chart
await chart.render();

Advanced Example with Technical Indicators

import { LineChart } from 'visioncharts';

const chart = new LineChart({
  container: '#advanced-chart',
  data: [/* your time series data */],
  options: {
    title: 'Advanced Financial Chart',
    showRecessionLines: true,
    isLogarithmic: false,
    margin: { top: 40, right: 60, bottom: 60, left: 80 }
  }
});

await chart.render();

// Add technical indicators
chart.addStudy('sma', {
  name: 'SMA (20)',
  period: 20,
  color: '#FF6B35',
  strokeWidth: 2
});

chart.addStudy('bollinger', {
  name: 'Bollinger Bands',
  period: 20,
  standardDeviations: 2,
  color: '#9C27B0'
});

📚 API Reference

Core Classes

Chart (Base Class)

// Initialize
const chart = new Chart(config);

// Configuration methods
chart.addDataset(dataset);
chart.removeDataset(datasetId);
chart.updateDataset(datasetId, updates);

// Rendering
await chart.render();
chart.update();
chart.resize(width, height);

// Interaction
chart.toggleLogarithmicScale(enabled);
chart.toggleRecessionLines(enabled);
chart.toggleZeroLine(enabled);

LineChart

const lineChart = new LineChart({
  container: '#chart',
  data: datasets,
  options: {
    // Line-specific options
    curve: 'monotone', // 'linear', 'step', 'cardinal', 'monotone'
    fillArea: false,
    fillOpacity: 0.3
  }
});

BarChart

const barChart = new BarChart({
  container: '#chart',
  data: datasets,
  options: {
    // Bar-specific options
    barWidth: 0.8,
    groupPadding: 0.1,
    showValues: true
  }
});

Technical Studies

Adding Studies

// Simple Moving Average
const smaId = chart.addStudy('sma', {
  name: 'SMA (50)',
  datasetId: 'dataset-1',
  parameters: { period: 50 },
  color: '#34A853',
  strokeWidth: 2,
  visible: true
});

// Exponential Moving Average  
const emaId = chart.addStudy('ema', {
  name: 'EMA (20)',
  datasetId: 'dataset-1',
  parameters: { period: 20 },
  color: '#EA4335',
  strokeWidth: 2,
  visible: true
});

// Bollinger Bands
const bollingerId = chart.addStudy('bollinger', {
  name: 'Bollinger Bands',
  datasetId: 'dataset-1',
  parameters: { 
    period: 20,
    standardDeviations: 2 
  },
  color: '#9C27B0',
  strokeWidth: 1,
  visible: true
});

Managing Studies

// Update study parameters
chart.updateStudy(studyId, {
  parameters: { period: 30 },
  color: '#FF5722'
});

// Remove study
chart.removeStudy(studyId);

// Get all studies
const studies = chart.getAllStudies();

// Get visible studies only
const visibleStudies = chart.getVisibleStudies();

Data Format

Dataset Structure

const dataset = {
  id: 'unique-id',           // Required: Unique identifier
  name: 'Display Name',      // Required: Human-readable name
  color: '#1468a8',          // Required: Chart color
  data: [                    // Required: Array of data points
    { 
      x: Date | number,      // X-axis value (timestamp or number)
      y: number              // Y-axis value
    }
  ],
  
  // Optional properties
  fill: false,               // Enable area fill (LineChart only)
  fillOpacity: 0.3,         // Fill opacity (0-1)
  strokeWidth: 2,           // Line width
  strokeOpacity: 1,         // Line opacity (0-1)
  visible: true,            // Dataset visibility
  interpolation: 'linear'   // Curve interpolation method
};

Time Series Data

// Preferred format for financial data
const timeSeriesData = [
  { x: new Date('2024-01-01T09:30:00'), y: 150.25 },
  { x: new Date('2024-01-01T09:31:00'), y: 151.10 },
  { x: new Date('2024-01-01T09:32:00'), y: 149.85 }
];

// Also supports timestamps
const timestampData = [
  { x: 1704110400000, y: 150.25 },  // milliseconds since epoch
  { x: 1704110460000, y: 151.10 },
  { x: 1704110520000, y: 149.85 }
];

Configuration Options

Chart Options

const options = {
  // Dimensions
  width: 800,
  height: 400,
  margin: { top: 40, right: 60, bottom: 60, left: 80 },
  
  // Content
  title: 'Chart Title',
  xAxisName: 'Date',
  yAxisName: 'Value',
  
  // Data processing
  xField: 'x',              // X data field name
  yField: 'y',              // Y data field name  
  xType: 'time',            // 'time', 'number', 'category'
  yType: 'number',          // Data type for Y axis
  
  // Visualization
  isLogarithmic: false,     // Enable logarithmic Y scale
  showGrid: true,           // Show grid lines
  showLegend: true,         // Show legend
  showRecessionLines: false,// Show recession indicators
  
  // Styling
  titleFontSize: 16,
  titleFontFamily: 'Arial, sans-serif',
  titleColor: '#333333',
  backgroundColor: 'white',
  
  // Advanced
  enableCrosshair: true,    // Enable crosshair interaction
  enableZoom: true,         // Enable zoom/pan
  enableTooltips: true,     // Enable data tooltips
  animationDuration: 300    // Animation duration (ms)
};

🎨 Styling & Themes

Custom Colors

// Define custom color palette
const customPalette = [
  '#FF6B6B', '#4ECDC4', '#45B7D1', 
  '#96CEB4', '#FECA57', '#FF9FF3'
];

// Apply to datasets
datasets.forEach((dataset, index) => {
  dataset.color = customPalette[index % customPalette.length];
});

CSS Customization

/* Override default styles */
.visioncharts-container {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

.visioncharts-title {
  font-family: 'Helvetica Neue', sans-serif;
  font-weight: 300;
}

.visioncharts-legend-item {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.visioncharts-crosshair-line {
  stroke-dasharray: 3,3;
}

🔧 Browser Support

VisionCharts automatically detects browser capabilities and selects the optimal renderer:

Browser	Canvas 2D	WebGL	SVG	Notes
Chrome 60+	✅	✅	✅	Full support
Firefox 55+	✅	✅	✅	Full support
Safari 12+	✅	✅	✅	Full support
Edge 79+	✅	✅	✅	Full support
IE 11	✅	❌	✅	Limited (no WebGL)

Capability Detection

import { browserSupport } from 'visioncharts';

// Check browser capabilities
const capabilities = browserSupport.getSupportSummary();
console.log('Canvas 2D:', capabilities.canvas2d);
console.log('WebGL:', capabilities.webgl);
console.log('High DPI:', capabilities.isHighDPI);

// Get recommended renderer for dataset size
const renderer = browserSupport.suggestRenderer(dataPointCount);
console.log(`Recommended renderer: ${renderer}`);

📊 Performance Guidelines

Dataset Size Recommendations

Data Points	Recommended Renderer	Expected Performance
< 1,000	SVG or Canvas 2D	Excellent
1,000 - 10,000	Canvas 2D	Very Good
10,000 - 50,000	Canvas 2D	Good
50,000+	WebGL	Excellent

Optimization Tips

// For large datasets, use WebGL
const chart = new LineChart({
  container: '#chart',
  data: largeDataset,
  options: {
    preferredRenderer: 'webgl',  // Force WebGL
    enableDataSampling: true,    // Sample data for better performance
    maxDataPoints: 100000        // Limit maximum points
  }
});

// Pre-process data for better performance
const processedData = chart.dataProcessor.processData(rawData, {
  removeOutliers: true,
  interpolateGaps: true,
  downsample: true,
  targetPoints: 10000
});

🛠️ Development

Project Structure

visioncharts/
├── src/
│   ├── core/                # Core chart classes
│   │   ├── Chart.js         # Base chart class
│   │   ├── Axis.js          # Axis rendering
│   │   └── Scale.js         # Scale management
│   ├── charts/              # Chart implementations
│   │   ├── LineChart.js     # Line/area charts
│   │   └── BarChart.js      # Bar charts
│   ├── components/          # Reusable components
│   │   ├── Legend.js        # Legend component
│   │   ├── Grid.js          # Grid system
│   │   └── Crosshair.js     # Crosshair interaction
│   ├── renderers/           # Rendering backends
│   │   ├── CanvasRenderer.js# Canvas 2D renderer
│   │   └── WebGLRenderer.js # WebGL renderer
│   ├── utils/               # Utility modules
│   │   ├── DataProcessor.js # Data processing
│   │   ├── PathGenerator.js # Path generation
│   │   └── BrowserSupport.js# Browser detection
│   └── index.js             # Main export
└── examples/                # Demo and examples
    ├── index.html           # Interactive demo
    ├── scripts/             # Demo script
    ├── styles/              # Demo page style
	└── data/ 				 # Sample JSON data

Building from Source

# Clone the repository
git clone https://github.com/visionkernel/visioncharts.git
cd visioncharts

# Install dependencies
npm install

# Build the library
npm run build

# Run development server
npm run dev

🤝 Community & Support

GitHub Issues: Report bugs and request features
Discussions: Join our community discussions

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Name		Name	Last commit message	Last commit date
Latest commit History 228 Commits
.github/workflows		.github/workflows
examples		examples
src		src
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
rollup.config.js		rollup.config.js

License

VisionKernel/VisionCharts

Folders and files

Latest commit

History

Repository files navigation

VisionCharts

✨ Features

🚀 Multi-Renderer Architecture

📊 Chart Types

📈 Technical Analysis

🎨 Visual Components

⚡ Performance & Compatibility

🚀 Quick Start

Installation

Basic Usage

Advanced Example with Technical Indicators

📚 API Reference

Core Classes

Chart (Base Class)

LineChart

BarChart

Technical Studies

Adding Studies

Managing Studies

Data Format

Dataset Structure

Time Series Data

Configuration Options

Chart Options

🎨 Styling & Themes

Custom Colors

CSS Customization

🔧 Browser Support

Capability Detection

📊 Performance Guidelines

Dataset Size Recommendations

Optimization Tips

🛠️ Development

Project Structure

Building from Source

🤝 Community & Support

📄 License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 5

Packages 0

Uh oh!

Contributors 4

Uh oh!

Languages

Packages