Example Gallery

The gallery is organized by analytical question, not by package export. Start with what the reader needs to compare, then open the family page for examples and implementation guidance.

Each embedded chart is a production catalog case rendered with TanStack Charts. The examples demonstrate complete compositions, while the concept and reference pages remain the source of truth for individual APIs.

Choose a family#

If two families seem plausible, use Choosing a Chart to compare the reader task, data shape, and risks of each encoding.

Use an example without inheriting accidental choices#

An example is a starting composition, not a schema for your data. Preserve your application rows and replace the example's channels, domains, labels, and formatters deliberately.

Before adapting a case:

1. Identify what one row represents and which fields are quantitative, temporal, ordinal, or nominal.
2. Decide whether the view needs raw observations, prepared summaries, or explicit intervals.
3. Supply scales with domains that express the intended comparison.
4. Keep only the marks that answer the question.
5. Verify the smallest supported container, light and dark themes, keyboard focus, and update behavior.

Data and Channels defines the row-to-channel contract. Scales and D3 explains which transforms and scale semantics belong to the application. Transforms and Reactivity shows how raw observations become the rows consumed by marks.

Build from the grammar#

Most examples are several small pieces sharing a coordinate system:

• marks encode rows through channels;
• scales map values to visual ranges;
• guides explain those scales;
• layers combine complementary encodings;
• the host handles responsive layout, rendering, focus, and updates.

Read Grammar of Graphics for that model and Marks and Layering before replacing a composition with a custom mark.

For implementation details, use the API Reference. For behavior that crosses chart and application state, use the task-focused Guides.