Charts generator

Charts generator is a web application that generates animated MP4 videos from financial and numerical data, entirely in the browser. It pulls live data from Yahoo Finance and FRED, renders chart animations on Canvas, and exports H.264 video via WebCodecs. No server-side encoding, no upload, just a URL and a download.

Charts generator, animated financial charts

Project Background

This project started from a simple question: what if you could turn a financial chart into a social media video in seconds? The result is a complete animation pipeline, data fetching, normalization, frame rendering, and video encoding, running entirely in the browser. Given the technical complexity of the project, I relied heavily on Claude Code throughout development. It was a genuinely complex build, and AI-assisted coding was central to making it happen, not just a convenience.

Technologies Used

The front-end is built with Nuxt 4 and Vue 3 (Composition API, TypeScript strict). Chart animations are rendered on Canvas 2D using
D3.js for scales and curves (Catmull-Rom splines). Video export uses the browser-native WebCodecs API paired with mp4-muxer to produce H.264 MP4 files with GPU acceleration. Data comes from Yahoo Finance (viayahoo-finance2) and FRED (Federal Reserve Economic Data). Styling is handled by Tailwind CSS v4.

Features

  • Live data fetching from Yahoo Finance, FRED, or custom CSV uploads
  • Multiple chart types: line race, bar race, each as a self-contained HTML template
  • Three Y-axis normalization modes: percent change, investment simulation, raw value
  • Flexible X-axis: time, numeric, duration, index, or category
  • Real-time preview with frame-accurate scrubbing
  • Full browser-side H.264 MP4 export via WebCodecs (no server encoding)
  • Session export and import to save and restore full chart configurations