UX Patterns Guide
Back to compare picker

Chart drilldown vs Data visualization vs Details panel vs Table

Choose Chart drilldown when users start from an aggregate mark and need to descend to the next planned level, such as region to country to store, while preserving the same metric, filter scope, and chart question.

Chart drilldown live exampleData visualization live exampleDetails panel live exampleTable live example

Decision dimensions

Dimension Chart drilldownData visualizationDetails panelTable
UI or UX UI + UX - Interactive chart hierarchy from aggregate marks to child-level dataUI + UX - Encoded visual analysis of quantitative or categorical dataUI + UX - Persistent selected-object inspection panelUI + UX - Semantic row-and-column data comparison surface
UI guidance Render a drillable chart with an analytic title, metric, current hierarchy level, selected parent mark, child-level label, axes, units, breadcrumbs or drill-up control, reset control, selected child mark, tooltip, inherited-filter summary, and data table alternative.Render a chart with a specific analytic question, title, dataset scope, mark type, axis labels, units, tick labels, scale baseline, legend, annotations, source or freshness note, selected mark, tooltip or detail, and data table alternative.Render a details panel as a persistent side or adjacent region that names the currently selected object, shows high-value metadata, status, and local secondary actions, and keeps the object selection visible in the source list, table, map, board, or feed.Render a table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability.
UX guidance Use Chart drilldown when users need to start from an aggregate visual pattern and inspect the planned next level of the same hierarchy without losing the original metric, filter scope, or chart question.Use Data visualization when visual encoding helps users detect trends, comparisons, rankings, distributions, relationships, outliers, part-to-whole composition, or uncertainty faster than reading rows.Use a details panel when users need to select and compare nearby objects while keeping a durable inspection area visible, such as reviewing records, tickets, assets, alerts, comments, files, or map locations.Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item.
Good UI A revenue-by-region bar chart labels Region level, lets users drill into APAC, replaces the bars with APAC countries, shows a Global > APAC breadcrumb, and keeps USD thousands and the date range visible.A revenue trend chart shows month on the x-axis, revenue in USD on the y-axis, a target line, color-coded channels with legend labels, selected month tooltip, annotation for a campaign, and a data table toggle.A ticket queue keeps TCK-2048 selected in the list and shows a right details panel with requester, severity, SLA, owner, activity, and Open full ticket.A payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor.
Bad UI A user clicks a tall bar and the whole chart changes to unlabeled smaller bars with no selected parent, no level label, and no way to return.A glossy chart card shows unlabeled bars with no axis, unit, baseline, data range, source, or explanation of what the colors mean.A panel titled Details shows metrics from the previously selected record after the list selection changes.A div layout looks like columns but has no caption, table semantics, or header associations.
Good UX An analyst drills from Region to Country, compares child bars, drills back to all regions, and sees the selected parent and inherited filters preserved throughout.An analyst switches from revenue to conversion rate, the y-axis unit changes, target and annotation stay aligned, and the selected month tooltip and table row update from the same data.A keyboard user moves down a ticket list, the highlighted row and details panel update together, and focus remains in the list until the user chooses Open full ticket.A user sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context.
Bad UX A dashboard treats drilldown like a hidden filter: drilling into Sales hides all other departments with no breadcrumb, so users think the whole company dropped.A dashboard truncates the y-axis to exaggerate a small change without indicating the baseline, leading a team to overreact.Sorting the list silently clears the highlighted row while the panel continues to show an old ticket.Filtering the table removes selected rows without explaining why or offering a clear-filter path.
Best fit Users need to investigate an aggregate chart mark by moving to the next planned level of a hierarchy.Users need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty.Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface.Records share comparable attributes that users need to scan in aligned columns.
Avoid when The next step is exact row auditing, editing, or export rather than aggregate visual comparison.The data question is a single number, a record list, a geographic location, or an event audit trail.The content is just a short temporary preview before navigation.The content is layout, not data.
Required state Top-level chart with drillable marks, level label, metric, units, date or filter scope, tooltip, legend, and table alternative.Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative.No selection state with a clear prompt or preserved last-selection rule.Default table state with caption, visible headers, row values, and result count or context.
Accessibility burden Expose chart title, current hierarchy level, selected parent, drill path, metric, units, filters, and available drill controls as text.Expose chart title, purpose, data scope, chart type, axes, units, legend, selected point, filter state, and source as text.Name the panel region from the selected object's title or a heading that includes the object identity.Use native table semantics for tabular data rather than div-only rows.
Common misuse Replacing a chart with child data without breadcrumbs, selected parent, or drill-up path.Using decorative charts that do not answer a data question.Showing a details panel with no selected-object identity.Using table markup to create page columns or layout spacing.

Chart drilldown

UI or UX
UI + UX - Interactive chart hierarchy from aggregate marks to child-level data
UI guidance
Render a drillable chart with an analytic title, metric, current hierarchy level, selected parent mark, child-level label, axes, units, breadcrumbs or drill-up control, reset control, selected child mark, tooltip, inherited-filter summary, and data table alternative.
UX guidance
Use Chart drilldown when users need to start from an aggregate visual pattern and inspect the planned next level of the same hierarchy without losing the original metric, filter scope, or chart question.
Good UI
A revenue-by-region bar chart labels Region level, lets users drill into APAC, replaces the bars with APAC countries, shows a Global > APAC breadcrumb, and keeps USD thousands and the date range visible.
Bad UI
A user clicks a tall bar and the whole chart changes to unlabeled smaller bars with no selected parent, no level label, and no way to return.
Good UX
An analyst drills from Region to Country, compares child bars, drills back to all regions, and sees the selected parent and inherited filters preserved throughout.
Bad UX
A dashboard treats drilldown like a hidden filter: drilling into Sales hides all other departments with no breadcrumb, so users think the whole company dropped.
Best fit
Users need to investigate an aggregate chart mark by moving to the next planned level of a hierarchy.
Avoid when
The next step is exact row auditing, editing, or export rather than aggregate visual comparison.
Required state
Top-level chart with drillable marks, level label, metric, units, date or filter scope, tooltip, legend, and table alternative.
Accessibility burden
Expose chart title, current hierarchy level, selected parent, drill path, metric, units, filters, and available drill controls as text.
Common misuse
Replacing a chart with child data without breadcrumbs, selected parent, or drill-up path.

Data visualization

UI or UX
UI + UX - Encoded visual analysis of quantitative or categorical data
UI guidance
Render a chart with a specific analytic question, title, dataset scope, mark type, axis labels, units, tick labels, scale baseline, legend, annotations, source or freshness note, selected mark, tooltip or detail, and data table alternative.
UX guidance
Use Data visualization when visual encoding helps users detect trends, comparisons, rankings, distributions, relationships, outliers, part-to-whole composition, or uncertainty faster than reading rows.
Good UI
A revenue trend chart shows month on the x-axis, revenue in USD on the y-axis, a target line, color-coded channels with legend labels, selected month tooltip, annotation for a campaign, and a data table toggle.
Bad UI
A glossy chart card shows unlabeled bars with no axis, unit, baseline, data range, source, or explanation of what the colors mean.
Good UX
An analyst switches from revenue to conversion rate, the y-axis unit changes, target and annotation stay aligned, and the selected month tooltip and table row update from the same data.
Bad UX
A dashboard truncates the y-axis to exaggerate a small change without indicating the baseline, leading a team to overreact.
Best fit
Users need to see trends, comparisons, rankings, distributions, relationships, composition, anomalies, or uncertainty.
Avoid when
The data question is a single number, a record list, a geographic location, or an event audit trail.
Required state
Default chart with title, question, data scope, axes, units, legend, source or freshness note, visible filters, and data alternative.
Accessibility burden
Expose chart title, purpose, data scope, chart type, axes, units, legend, selected point, filter state, and source as text.
Common misuse
Using decorative charts that do not answer a data question.

Details panel

UI or UX
UI + UX - Persistent selected-object inspection panel
UI guidance
Render a details panel as a persistent side or adjacent region that names the currently selected object, shows high-value metadata, status, and local secondary actions, and keeps the object selection visible in the source list, table, map, board, or feed.
UX guidance
Use a details panel when users need to select and compare nearby objects while keeping a durable inspection area visible, such as reviewing records, tickets, assets, alerts, comments, files, or map locations.
Good UI
A ticket queue keeps TCK-2048 selected in the list and shows a right details panel with requester, severity, SLA, owner, activity, and Open full ticket.
Bad UI
A panel titled Details shows metrics from the previously selected record after the list selection changes.
Good UX
A keyboard user moves down a ticket list, the highlighted row and details panel update together, and focus remains in the list until the user chooses Open full ticket.
Bad UX
Sorting the list silently clears the highlighted row while the panel continues to show an old ticket.
Best fit
Users repeatedly inspect selected records, tickets, alerts, files, assets, tasks, comments, or locations while staying in a work surface.
Avoid when
The content is just a short temporary preview before navigation.
Required state
No selection state with a clear prompt or preserved last-selection rule.
Accessibility burden
Name the panel region from the selected object's title or a heading that includes the object identity.
Common misuse
Showing a details panel with no selected-object identity.

Table

UI or UX
UI + UX - Semantic row-and-column data comparison surface
UI guidance
Render a table with a specific caption or heading, visible column headers, optional row headers, aligned values, consistent row actions, and enough spacing for scanability.
UX guidance
Use tables when aligned columns help users compare records, find exceptions, audit values, or triage work faster than opening each item.
Good UI
A payment review table has the caption June vendor payments, headers Vendor, Status, Due date, Amount, and Action, right-aligned amounts, and row actions labelled by vendor.
Bad UI
A div layout looks like columns but has no caption, table semantics, or header associations.
Good UX
A user sorts by Amount descending, filters to Pending, moves to page 2, and the table keeps its caption, active sort, active filter, row count, and selected payment context.
Bad UX
Filtering the table removes selected rows without explaining why or offering a clear-filter path.
Best fit
Records share comparable attributes that users need to scan in aligned columns.
Avoid when
The content is layout, not data.
Required state
Default table state with caption, visible headers, row values, and result count or context.
Accessibility burden
Use native table semantics for tabular data rather than div-only rows.
Common misuse
Using table markup to create page columns or layout spacing.
Decision rules
  • Choose Chart drilldown when users start from an aggregate mark and need to descend to the next planned level, such as region to country to store, while preserving the same metric, filter scope, and chart question.
  • Choose Data visualization when the user only needs to read the current trend, comparison, distribution, or anomaly and does not need to traverse a hierarchy or change granularity from a selected mark.
  • Choose Details panel when selecting a chart object should reveal descriptive attributes, notes, ownership, or related records without replacing the chart's visible aggregate series.
  • Choose table when users need exact child rows, reconciliation, export, sorting, editing, or audit work more than visual aggregate-to-child navigation.
  • A Chart drilldown should expose the current level, selected parent mark, breadcrumb or drill-up path, child-level label, inherited filters, metric continuity, and a reset or return path before users rely on the deeper view.
  • Use drilldown for bounded hierarchies with clear parent-child relationships; do not use it for arbitrary filtering, unrelated dashboard navigation, or a hidden route to a different report page.
  • Use drillthrough instead of in-chart drilldown when the user must move to a different page focused on a single entity with richer detail visuals and a clear Back control.
  • Keep selected aggregate, child marks, tooltip, table alternative, announcement text, and breadcrumbs synchronized so keyboard and assistive-technology users understand the level change.
  • Do not let drilldown silently change aggregation, unit, time range, sample, or filters; disclose any change next to the chart and in exported context.
  • Limit depth or provide orientation aids when hierarchy levels become long, sparse, or asymmetric, because deep drill paths can hide peer context and make comparison unreliable.
Inspect live examples
Chart drilldownData visualizationDetails panelTable
Failure modes
  • A clicked mark replaces the chart with child data but gives no breadcrumb, selected parent, or way back to the previous level.
  • Drilling changes metric, unit, baseline, time range, or filter scope without a visible disclosure.
  • The drill target is not a real child of the selected aggregate, causing users to interpret unrelated data as a breakdown.
  • Keyboard and screen-reader users receive no announcement when the chart data changes after drilldown.
  • Deep levels hide peer totals and make the user forget whether they are viewing all data or one branch.
  • The chart uses drilldown as a substitute for row-level auditing where a table would be more accurate.