Appearance
Stacked Bar Chart Example
This example shows the inspector alongside a Visa Chart Components stacked bar chart. The chart's built-in keyboard navigation is disabled — instead, data-navigator handles navigation on the chart, and the inspector passively shows the structure being traversed.
Keyboard Controls
| Command | Key |
|---|---|
| Enter the structure | Activate the "Enter navigation area" button |
| Exit | Esc |
| Left (backward along category) | ← |
| Right (forward along category) | → |
| Up (backward along date) | ↑ |
| Down (forward along date) | ↓ |
| Drill down to child | Enter |
| Drill up to category parent | W |
| Drill up to date parent | J |
At the deepest level, left/right moves across dates (via childmostNavigation: 'across') and up/down moves across categories. Both dimensions wrap around circularly.
Chart + Inspector
Stacked Bar Chart
Structure Inspector
About This Example
This uses the same dataset and structure configuration as the testing environment in the archive. The stacked bar chart is rendered by @visa/stacked-bar-chart via CDN, with its built-in keyboard navigation disabled. Data Navigator handles all navigation via its rendering and input modules on the chart wrapper, and the inspector graph passively shows the hierarchical structure being traversed.
Navigation uses childmostNavigation: 'across', which means left/right always moves across dates even at the deepest level — intuitive for a stacked bar chart where left/right should always move across time.