Building a drug pipeline chart that works on phones

If you build sites for biotech companies, you will build a pipeline chart. I have coded them for BioLineRx, Nuvalent and several other clients. They look simple in a design file: a row per drug program, columns for each phase, and a bar showing how far it has got. The hard part is a 375px-wide phone.

Start from data, not from the picture

I keep the programs in a list and derive the bar from the phase, so updating a program after a trial result is a one-line content change instead of a layout change.

const PHASES = ["Preclinical", "Phase 1", "Phase 2", "Phase 3", "Approved"] as const;

type Program = {
  name: string;
  indication: string;
  phase: (typeof PHASES)[number];
};

// Bar width as a share of the full row, e.g. "Phase 2" -> 60%.
const progress = (p: Program) => ((PHASES.indexOf(p.phase) + 1) / PHASES.length) * 100;

Two layouts, one source

• On wide screens: a grid with a header row of phase names and a bar per program.
• On phones: each program becomes a card with its name, indication and the phase written out in words, plus a slim progress bar.
• The phase is always present as text, never only as a bar length or a colour.
• Container queries let the chart switch layout based on the space it actually has, not the window width.

Accessibility details

A chart like this is really a table, so on desktop I either use a real table or give the grid table roles. Each bar gets text a screen reader can read, such as "Phase 2 of 5". Colours that separate therapy areas also get a label or icon, because around one in twelve men has some form of colour blindness.

Expandable rows are common too: tap a program to see the trial details. I use a button with aria-expanded for those, the same pattern as an accordion, so keyboard and screen reader users get them for free.

Done this way, the chart is easy for the client to update, quick to read on a phone, and still looks like the design on a big screen.