Immersive Data: Introducing Fullscreen Charts

Sometimes a chart is just too good (or too complex) to be confined to a column. Today we’re introducing Fullscreen Mode for all Vox-style charts.

How it Works

We’ve added a simple interaction model to VoxContainer:

1. Hover: Reveals a fullscreen toggle icon in the top-right corner.
2. Click Icon: Expands the chart to fill the screen.
3. Double Click: You can also double-click anywhere on the container to toggle.

This feature is opt-in. You enable it by adding allowFullscreen={true}.

Interactive Examples

Try it out below!

1. The Standard Chart (Fullscreen Enabled)

Hover over this chart and look for the icon, or just double-click it.

---

2. Complex Data (Benefits from Fullscreen)

Charts with many columns or fine details benefit most from the extra space.

---

3. Dark Mode Example

Fullscreen works seamlessly with themes.

Default Behavior

For comparison, here is a chart without the allowFullscreen prop. Notice that double-clicking does nothing.

UX Considerations

We decided to make this opt-in to avoid “scroll-jacking” or unexpected behavior on simple charts. Use it for:

• Large datasets.
• Detailed diagrams.
• Maps or complex visualizations.

The double-click interactions provide a fast path for power users, while the icon keeps the feature discoverable.