I open-sourced the financial charting library we use in production

If you’ve ever tried to build a trading dashboard, a crypto portfolio tracker, or any financial app, you probably ran into the "charting problem" pretty quickly.

The standard industry approach goes something like this:

Embed a heavy from a 3rd party provider. Realize it doesn't quite match your app's UI/theme. Struggle with limited postMessage APIs to push real-time data. Watch the UI lag when you try to render multiple charts on the same page. I got tired of fighting with iframe embeds and DOM-based SVG charts that couldn't handle thousands of real-time ticks. I needed something native, fast, and entirely under my control. So, I built one. And today, I'm fully open-sourcing the core engine. Meet Exeria Charts Exeria Charts is a source-available, high-performance financial charting library designed for self-hosted web applications. Instead of embedding external widgets, Exeria renders directly inside your application using a highly optimized Canvas architecture. Here’s a quick look at what it can do: <a href="https://exeria.dev">https://exeria.dev</a> The Tech Constraints (Why build another charting lib?) Building a financial chart isn't just about drawing boxes and lines. It’s about performance under pressure. When designing the architecture, we had a few strict requirements: <ul> <li>Zero iframes: It had to be a native JavaScript/React module that lives in the main DOM tree, styled perfectly to match the host application.</li> <li>High-frequency updates: Crypto and forex markets move fast. The library needed to handle sub-millisecond tick updates without dropping frames or blocking the main UI thread.</li> <li>Unified runtime: I didn't want a separate library for line charts, another for candlesticks, and another for volume histograms. We needed one engine that could switch views instantly.</li> </ul> How to use it We designed the API to be as straightforward as possible. Here is what a vanilla JS implementation looks like: <div class="highlight"><pre class="highlight javascript"><code>import { createChart } from "@efixdata/exeria-chart"; // 1. Grab your container const container = document.getElementById("chart-root"); // 2. Initialize the chart const chart = createChart({ container }); // 3. Feed it some data const candles = [ { stamp: 1715472000000, o: 101.2, h: 103.1, l: 100.9, c: 102.8, v: 3200 }, { stamp: 1715475600000, o: 102.8, h: 104.2, l: 102.1, c: 103.9, v: 2950 }, ]; await chart.setMainSeriesData(candles, { symbol: "1h", milis: 3600000 }); chart.init(); </code></pre></div> (If you use React, we also built an open-source wrapper @efixdata/exeria-chart-ui-react that gives you out-of-the-box toolbars and menus). Open Sourcing the Core The core charting engine is available on GitHub under the AGPL-3.0 license. We've also open-sourced (MIT) a bunch of data connectors so you can plug straight into Binance, Kraken, Coinbase, etc., without writing websocket boilerplate. I’d love to get feedback from the Dev.to community. If you are building fintech apps, crypto trackers, or just like messing around with Canvas performance: What charting libraries are you currently using? What is the biggest pain point you have with displaying real-time data? Check out the Live Playground or drop a star on the Repo if you find it useful. Happy to answer any questions about Canvas rendering or handling high-frequency financial data in JS!

推荐订阅源

DEV Community