A real-time chart that runs anywhere
A streaming financial chart built in Angular 14, packaged as Web Components and reused inside a Blazor WebAssembly app.
Context
I built a real-time financial charting dashboard in Angular 14. Prices stream in continuously, and the charts redraw as they arrive.
The same approach later ran real-time charting and trading-tools dashboards for crypto trading, on .NET microservices in Docker. I worked on both the backend and the frontend.
Problem
The same charts were needed inside a Blazor WebAssembly app. Rewriting them in Blazor would have meant two implementations of the same behaviour to keep in step.
What I did
I turned the dashboard’s modules into reusable Web Components. A Web Component is a custom HTML element. The Blazor app uses it like any other tag, without knowing Angular is inside.
Angular Elements does the packaging. Each component becomes a custom element, its inputs become attributes and properties, and its outputs become DOM events.
For real-time dashboards I have also used SciChart, a WebAssembly charting library built for very large, fast-moving data sets.
Result
The charting modules run inside the Blazor WebAssembly app, from one codebase.
Stack
- Angular
- Angular Elements
- RxJS
- Web Components
- Blazor WASM
- .NET microservices
- Docker
The element
The chart below is <nehang-live-chart>, a Web Component built for this page. The page loads it the way any other site would, with a script tag and an HTML element. It draws synthetic prices on a canvas by hand, with no chart library.
Static preview. The interactive version needs JavaScript.
Use it anywhere
Any page can use the element with a script tag and a tag. No framework required.
<script type="module" src="/elements/live-chart.js"></script>
<nehang-live-chart window-seconds="60" label="Synthetic price"></nehang-live-chart>Open the element on a plain HTML page
API
| Name | Kind | What it does |
|---|---|---|
| window-seconds | Attribute | Visible time window in seconds: 30, 60 or 300. Defaults to 60. |
| label | Attribute | Series name shown in the toolbar and read by screen readers. |
| paused | Attribute | Present to start paused. The element starts paused anyway if the system asks for reduced motion. |
| seed | Attribute | Seed for the synthetic price walk, so a page looks the same on every load. |
| pausechange | Event | Fires when the chart is paused or resumed. event.detail is true when paused. |
| --nlc-bg, --nlc-fg, --nlc-muted, --nlc-line, --nlc-grid | CSS property | Colours. The element reads them from its host, so a page can theme it. |
| toolbar, plot | CSS part | Style the toolbar and plot area from outside with ::part(). |