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.<br> Realize it doesn't quite match your app's UI/theme.<br> Struggle with limited postMessage APIs to push real-time data.<br> Watch the UI lag when you try to render multiple charts on the same page.</p> <p>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.</p> <p>So, I built one. And today, I'm fully open-sourcing the core engine.</p> <p><strong>Meet Exeria Charts</strong></p> <p>Exeria Charts is a source-available, high-performance financial charting library designed for self-hosted web applications.</p> <p>Instead of embedding external widgets, Exeria renders directly inside your application using a highly optimized Canvas architecture.</p> <p>Here’s a quick look at what it can do: <a href="https://exeria.dev">https://exeria.dev</a></p> <p><strong>The Tech Constraints (Why build another charting lib?)</strong><br> Building a financial chart isn't just about drawing boxes and lines. It’s about performance under pressure.</p> <p>When designing the architecture, we had a few strict requirements:</p> <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> <p><strong>How to use it</strong><br> We designed the API to be as straightforward as possible. Here is what a vanilla JS implementation looks like:<br> </p> <div class="highlight"><pre class="highlight javascript"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">createChart</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">@efixdata/exeria-chart</span><span class="dl">"</span><span class="p">;</span> <span class="c1">// 1. Grab your container</span> <span class="kd">const</span> <span class="nx">container</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">chart-root</span><span class="dl">"</span><span class="p">);</span> <span class="c1">// 2. Initialize the chart</span> <span class="kd">const</span> <span class="nx">chart</span> <span class="o">=</span> <span class="nf">createChart</span><span class="p">({</span> <span class="nx">container</span> <span class="p">});</span> <span class="c1">// 3. Feed it some data</span> <span class="kd">const</span> <span class="nx">candles</span> <span class="o">=</span> <span class="p">[</span> <span class="p">{</span> <span class="na">stamp</span><span class="p">:</span> <span class="mi">1715472000000</span><span class="p">,</span> <span class="na">o</span><span class="p">:</span> <span class="mf">101.2</span><span class="p">,</span> <span class="na">h</span><span class="p">:</span> <span class="mf">103.1</span><span class="p">,</span> <span class="na">l</span><span class="p">:</span> <span class="mf">100.9</span><span class="p">,</span> <span class="na">c</span><span class="p">:</span> <span class="mf">102.8</span><span class="p">,</span> <span class="na">v</span><span class="p">:</span> <span class="mi">3200</span> <span class="p">},</span> <span class="p">{</span> <span class="na">stamp</span><span class="p">:</span> <span class="mi">1715475600000</span><span class="p">,</span> <span class="na">o</span><span class="p">:</span> <span class="mf">102.8</span><span class="p">,</span> <span class="na">h</span><span class="p">:</span> <span class="mf">104.2</span><span class="p">,</span> <span class="na">l</span><span class="p">:</span> <span class="mf">102.1</span><span class="p">,</span> <span class="na">c</span><span class="p">:</span> <span class="mf">103.9</span><span class="p">,</span> <span class="na">v</span><span class="p">:</span> <span class="mi">2950</span> <span class="p">},</span> <span class="p">];</span> <span class="k">await</span> <span class="nx">chart</span><span class="p">.</span><span class="nf">setMainSeriesData</span><span class="p">(</span><span class="nx">candles</span><span class="p">,</span> <span class="p">{</span> <span class="na">symbol</span><span class="p">:</span> <span class="dl">"</span><span class="s2">1h</span><span class="dl">"</span><span class="p">,</span> <span class="na">milis</span><span class="p">:</span> <span class="mi">3600000</span> <span class="p">});</span> <span class="nx">chart</span><span class="p">.</span><span class="nf">init</span><span class="p">();</span> </code></pre></div> <p></p> <p>(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).</p> <p><strong>Open Sourcing the Core</strong><br> The core charting engine is available on GitHub under the AGPL-3.0 license.</p> <p>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.</p> <p>I’d love to get feedback from the Dev.to community.</p> <p>If you are building fintech apps, crypto trackers, or just like messing around with Canvas performance:</p> <p>What charting libraries are you currently using?<br> What is the biggest pain point you have with displaying real-time data?<br> 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!</p>