Charts
These are the charts that answer a question a line or a bar chart cannot: when each piece of work happens and who is behind, where people stop on the way through a flow, and what state something was in on each of the last thirty days. Orvain's Charts family holds three, one for each question: a Gantt chart, a funnel and a dot grid.
What they share is that every mark is something a reader can point at. A bar on a Gantt chart is a task with dates, a step in a funnel is a count of people, a dot is one day of one service. So each block is navigable: the arrow keys move between the marks, and each mark names itself and shows its numbers on hover or focus, rather than leaving the chart as one picture with a caption.
Launch plan
Best for
A project's tasks against the calendar, with who is behind
Anatomy
Grouped rows · week columns · progress inside each bar · status colours · diamond milestones · a today line · roving focus with a tooltip per bar
- On track
- At risk
- Late
- Milestone
Today, Oct 31 · arrow keys move between bars
Sign-up funnel
Best for
Where people stop on the way through a flow
Anatomy
One bar per step, measured against the first · conversion from the step before · the biggest drop marked · a step selected by click or Enter · range switch
- 20% continued · biggest drop
- 74% continued
- 46% continued
- 45% continued
Service uptime
Best for
Day-by-day state for a handful of things: services, habits, shifts
Anatomy
A row per service · a dot per day coloured by state · empty dots for no data · uptime share at the end · a grid walked with the arrow keys
- Up
- Degraded
- Down
- No data
API, Oct 31: up · arrow keys walk the grid
Using Charts
Reach for it when
- A plan of tasks that overlap in time, where seeing what runs alongside what matters as much as the dates.
- A flow people move through in order, such as sign-up, checkout or hiring, where the question is which step loses them.
- A small number of things, each with one state per day, where a pattern over a month is the point.
Reach for something else when
- A single trend over time. A line or area chart says it with less ink: see the Metrics family.
- Steps people can take in any order. A funnel claims an order; for independent actions, use a bar chart of each count.
- Dozens of rows of daily values. A dot grid stops being readable past a screenful; use a heatmap table, which carries the numbers too.
Where it shows up
Release planning
A launch broken into design, build and release, each task a bar with its progress drawn inside it and a colour that says whether it is on time. The today line shows at a glance which bars should already be further along.
Activation reporting
A weekly look at sign-up, from the first visit to the first paid plan. Each step shows its share of the visitors and how many carried on from the step before, and the step with the steepest loss is marked so the meeting starts there.
Questions
How do people using a keyboard or a screen reader read these charts?
Each mark is a focusable element with a name that carries its numbers, such as a task with its dates, progress and status, or a day with its state. Focus moves between marks with the arrow keys rather than the Tab key, so a chart is one stop in the page's tab order, and the same details that appear in a tooltip on hover are announced on focus.
What happens to a Gantt chart or a dot grid on a phone?
Both keep their whole range rather than scrolling part of it away. The Gantt chart's label column narrows and its week headings shorten to week numbers, and the dot grid's cells get smaller. A schedule that hides half its weeks, or a month that hides two of them, no longer answers the question it was drawn for.
Premium components,
free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
Orvain MCPCharts
These are the charts that answer a question a line or a bar chart cannot: when each piece of work happens and who is behind, where people stop on the way through a flow, and what state something was in on each of the last thirty days. Orvain's Charts family holds three, one for each question: a Gantt chart, a funnel and a dot grid.
What they share is that every mark is something a reader can point at. A bar on a Gantt chart is a task with dates, a step in a funnel is a count of people, a dot is one day of one service. So each block is navigable: the arrow keys move between the marks, and each mark names itself and shows its numbers on hover or focus, rather than leaving the chart as one picture with a caption.
Launch plan
Best for
A project's tasks against the calendar, with who is behind
Anatomy
Grouped rows · week columns · progress inside each bar · status colours · diamond milestones · a today line · roving focus with a tooltip per bar
- On track
- At risk
- Late
- Milestone
Today, Oct 31 · arrow keys move between bars
Sign-up funnel
Best for
Where people stop on the way through a flow
Anatomy
One bar per step, measured against the first · conversion from the step before · the biggest drop marked · a step selected by click or Enter · range switch
- 20% continued · biggest drop
- 74% continued
- 46% continued
- 45% continued
Service uptime
Best for
Day-by-day state for a handful of things: services, habits, shifts
Anatomy
A row per service · a dot per day coloured by state · empty dots for no data · uptime share at the end · a grid walked with the arrow keys
- Up
- Degraded
- Down
- No data
API, Oct 31: up · arrow keys walk the grid
Using Charts
Reach for it when
- A plan of tasks that overlap in time, where seeing what runs alongside what matters as much as the dates.
- A flow people move through in order, such as sign-up, checkout or hiring, where the question is which step loses them.
- A small number of things, each with one state per day, where a pattern over a month is the point.
Reach for something else when
- A single trend over time. A line or area chart says it with less ink: see the Metrics family.
- Steps people can take in any order. A funnel claims an order; for independent actions, use a bar chart of each count.
- Dozens of rows of daily values. A dot grid stops being readable past a screenful; use a heatmap table, which carries the numbers too.
Where it shows up
Release planning
A launch broken into design, build and release, each task a bar with its progress drawn inside it and a colour that says whether it is on time. The today line shows at a glance which bars should already be further along.
Activation reporting
A weekly look at sign-up, from the first visit to the first paid plan. Each step shows its share of the visitors and how many carried on from the step before, and the step with the steepest loss is marked so the meeting starts there.
Questions
How do people using a keyboard or a screen reader read these charts?
Each mark is a focusable element with a name that carries its numbers, such as a task with its dates, progress and status, or a day with its state. Focus moves between marks with the arrow keys rather than the Tab key, so a chart is one stop in the page's tab order, and the same details that appear in a tooltip on hover are announced on focus.
What happens to a Gantt chart or a dot grid on a phone?
Both keep their whole range rather than scrolling part of it away. The Gantt chart's label column narrows and its week headings shorten to week numbers, and the dot grid's cells get smaller. A schedule that hides half its weeks, or a month that hides two of them, no longer answers the question it was drawn for.
Related blocks
All blocksPremium components, free in your inbox.
Join the Orvain Dispatch and get production-ready components, free to keep: React and Vue code plus the Figma frame, yours to ship.
