Skip to content
All work

Phaidra · Software Engineer II

Charts at a Million Points

Insights was an AI chatbot for plant data: ask a question, get a chart. A single chart could hold six or more series of a million points each. I moved it from Highcharts to AG Charts and built its charts, wired to the backend LLM.

ReactTypeScriptAG ChartsLLM · RAG
My part
The charts, and the library behind them
Level
Software Engineer II
Data
6+ series × ~1M points each
Stack
React · TypeScript · AG Charts

01The problem

Insights was an AI chatbot for plant data. A user asks a question and the answer comes back as a chart. Those charts were big: six or more series, with around a million points in each.

The whole point of Insights was to look at the data, so a chart that stutters at that size isn't usable. We were using Highcharts, and the question was whether to keep it.

This was internal product work, so there are no screenshots or recreations here. What follows is the shape of the problem and my part in it, at the level I can share publicly.

02What I did

AG Charts over Highcharts

I chose AG Charts because it handled data at this size smoothly and quickly, and because it could be customised far enough to fit inside chat answers.

Trade-offMoving off a library the team already knew, and learning a new API.

Build it into the live feature

I built the charts into Insights itself: a question goes through RAG and the backend LLM and comes back as an AG Charts chart, customised to fit the chat answer. Doing it on the real feature also showed the other developers how easily AG Charts could replace Highcharts.

Trade-offIt had to work with the real backend and real data from the start.

03Outcome

  • AG Charts for Insights

    The charting library for Insights, chosen for data at a million points per series.

  • Built on the real feature

    Real questions, real backend, real data, which let the team see how easily the switch would go.

esc
↑↓ to move↵ to select