Animated web chart components that transform repository-like data into interactive SVG views, shipped without dependencies in the current 2026 release.
bun-charts is a browser-focused set of interactive chart components made for animated data stories and visualization layouts. It centers on SVG output that fits naturally into dashboards, articles, and product pages where readable motion is part of the presentation.
The components read JSON data and rely on lightweight browser behavior to start playback when they scroll into view. For developers, that means reusable visualization pieces without extra dependency weight or the need to build bespoke animation logic from the ground up.
- Interactive SVG chart components for browser-based visualization
- Commit heatmap replay for timeline-style repository activity
- Adversarial review animation for comparative data display
- CI race timeline visualization for build and pipeline narratives
- Workflow split visualization for branching or parallel process views
- Number counter animation for highlighting changing values
- Intersection Observer autoplay to trigger motion on view
- Data-driven embedded JSON for easy content injection
- Zero-dependency design for simple integration
Clone the repo or download it, then open the HTML entry file in a browser or host it on any static web server.
git clone https://github.com/kevin-cooperzhcd744/bun-charts-2026.git
cd REPOFor a local preview, run it with whichever static server you prefer, then open the page in your browser.
- Pick the visualization you want to show.
- Replace the embedded JSON payload with your own data.
- Shape the HTML and Tailwind CSS layout so it matches your page.
- Open the page and allow the animations to run as the charts come into view.
Example workflow:
- Put chart data into the embedded JSON block
- Keep the SVG structure intact
- Tune animation timing in JavaScript if needed
- Reuse the component in a dashboard or article layout
Most of the customization lives in the HTML and inline data. In practice, the main settings are kept in the embedded JSON block and the JavaScript hooks around it.
{
"autoplay": true,
"chart": "commit-heatmap",
"animation": "intersection-observer",
"renderMode": "svg"
}If you are tailoring the components, take a look at the HTML structure, Tailwind utility classes, and any data attributes that control the animation flow.
- A modern web browser
- HTML, JavaScript, and SVG support
- A static file server for local development, if desired
- Tailwind CSS for the intended layout styling
- No runtime dependencies are required
How do I change the visuals?
Update the embedded data and refresh the page. The charts are built to reflect the JSON input you provide.
Can I use this in a dashboard?
Yes. These components are intended for web pages, dashboards, and other browser-based layouts.
Why do the animations not start?
Make sure the target element is visible in the viewport and verify that the intersection observer logic is running.
Where are updates announced?
Check the repository history and the project release pages for the latest changes and version information.
What if I need different styling?
Adjust the Tailwind CSS classes and the surrounding HTML structure so they fit your page design.
GNU GPL v3.0 - see LICENSE for details.
