← NetBase EnterpriseFeature deep dive

Annotations

A spike means nothing until you know what happened that day.

Analysts held large, valuable data sets they wanted to share — but stripped of context, that data was useless to anyone unfamiliar with it. Annotations let them mark a launch, a campaign, an event, so the data could be read with its story — for presentation and for the archive.

in-chart annotation
Mentions over timeAnnotations
02550751001
CHC. HicksJul 4 · 12:45p
Product launch went live — spike is the announcement landing.
add to filterLaunch
Jun 30Jul 1Jul 2Jul 3Jul 4Jul 5
01The problem

Data without context is just a shape on a chart.

The people who ran Enterprise understood exactly why a line jumped on a given Tuesday. Everyone they shared it with did not. For the data to travel — into a deck, to a colleague, into next year’s review — the context had to travel with it.

The requirement

Give the data proper context for someone not familiar with it.

And

Make it easy for the person who is familiar to annotate it.

02The design decision that defined it

Beside the data, or on top of it?

My first concept put annotations in a side panel— time, date, and commentary living next to the chart. In wireframing and testing, it didn’t hold up: it didn’t give enough context, and it cluttered the UI. The stronger idea was to put annotations directly on the data, in the chart view itself.

First concept
NOTES

Notes in a side panel

Alongside the chart. Not enough context, and it cluttered the view.

The reframe

Notes on the data

Markers in the chart, context where the eye already is.

THE BETPushing the platform

Design for the best idea. Let it pull engineering forward.

Our visualization layer was Highcharts, and no one was sure it could support annotation inside the chart. I could have designed around the uncertainty. Instead I went in with in-chart annotation as the first and best concept — fallbacks kept in my back pocket — and let it push the team.

The dev team took it on alongside their regular work and built it. In the process I learned Highcharts in real depth: exactly how far we could push it. Annotations became a proving ground for a deliberate stance — stretching engineering past building only to the platform’s defaults.

The design challenge

Create the annotations and show them without distracting from the data itself — a marker that adds meaning, never noise.

annotation — the add-note flow
Annotations
Add Annotation
Currently there are no notes for this time period.
Annotations
Add Annotation
10:01
Note text goes here…
Save
Annotations
Add Annotation
Annotation Text
Date · 12:45pm
add to filter
1 · empty state2 · write the note3 · saved to the point

Add a note in three steps: empty → write it → saved to the point on the chart.

What it taught me

The riskiest concept was the right one.

Designing for the best idea — instead of pre-compromising to what the platform could obviously do — is what got in-chart annotation built at all. Keep the fallback ready; lead with the best idea.