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
Sorting makes comparison easier. Labels make values available without hovering. Try both.
Fixed sample data, not financial data or live AI output. This illustrates design choices without running a model.Change the presentation. Keep the data.
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：We led the project and its technical design, and built core modules. Our work focused on component interfaces, framework integration, and releases.
