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 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.
Practice the judgment: Imagine this situation: Deep levels hide peer totals and make the user forget whether they are viewing all data or one branch. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Chart drilldown | Data visualization | Details panel | Table |
|---|---|---|---|---|
| UI or UX | UI + UX - Interactive chart hierarchy from aggregate marks to child-level data | UI + UX - Encoded visual analysis of quantitative or categorical data | UI + UX - Persistent selected-object inspection panel | UI + 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 | Preserve orientation on every level change: announce the new level, show the path back to the aggregate, keep selected parent context visible, and disclose any change to unit, aggregation, filter, time range, sample, or freshness. | 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 chart drilldown changes from revenue to margin and from monthly to quarterly data but keeps the same title, making users compare incompatible values. | Axes or units are missing and magnitude is ambiguous. | A panel titled Details shows metrics from the previously selected record after the list selection changes. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. |
| 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 | Metric, unit, aggregation, baseline, time grain, filter scope, or sample changes silently between levels. | A chart filter removes the low-performing segment but the legend and annotation still describe the full dataset. | Sorting the list silently clears the highlighted row while the panel continues to show an old ticket. | Mobile stacking removes headers and turns rows into unlabeled paragraphs. |
| 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 task depends on rich previews, imagery, or uneven metadata. |
| 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. | Selected-object state with source item highlighted and panel title naming the same object. | 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 | Using drilldown as a hidden filter that silently narrows the whole dashboard. | Choosing a chart type that mismatches the data relationship. | Keeping the previous ticket summary in the persistent panel after the highlighted row has moved to a different ticket. | Using table markup to create page columns or layout spacing. |