Financial visualization infrastructure
A financial chart library our team have maintained over several years. Products share charts and interactions while using their own frontend frameworks.
Changing products or frontend frameworks should not mean rewriting the charts.
A SMALL EXPLORATION
The most common misreading of a financial chart is not wrong data but the wrong axis. Long-run prices belong on a log scale, and drawdowns need marking, or readers remember only the final rally.
Illustrative data, not market prices or live component output. It only shows a design choice.On a linear axis the late rally fills the chart and the 43% fall in 2007–2008 nearly disappears.
PROJECT EXAMPLES
A mobile financial bubble chart with timeline, labels, and animated data updates.
Frequency and weight encoding over financial terms, captured from the real component demo.
Continuous streams show how the strength and structure of industry themes change over time.
Revenue, cost, and profit are organized into a year-by-year animated flow.
01 / Context
Products used different frameworks, chart engines, and data formats. Copying a component also copied its original theme, interactions, and data assumptions, all of which needed reworking.
What we built
Standard Chart and HiVis collect that shared work into a library. Web Components support integration across frameworks, charts interact within cards, and generated configurations are checked before rendering.
02 / System
Unified data, configuration, events, themes, and lifecycle across products and chart engines.
Charts can interact within a card, while separate cards stay independent. This gives us a smaller area to investigate when an interaction breaks.
Stencil compiled to native Web Components with React, Vue, and Angular wrappers, plus lazy delivery for components and AI charts.
03 / Decisions
Scoped interaction events to a card, preventing implicit global dependencies in complex financial pages.
Axes, legends, and other shared parts live in base components. Specialized behavior gets its own component so one chart does not accumulate too many options.
AI output entered rendering only after structural validation, adaptation, and fallback handling.
04 / Our work
Role：I designed the core architecture of HiVis. My team and I led DataV and Standard Chart; my own work centred on component interfaces, framework integration, and releases, alongside core development.
