> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chart

> Flexible data visualizations with variants for surfacing industrial data patterns, trends, and comparisons — from asset performance to sensor readings to operational status.

## Chart

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-chart--docs)

Charts are flexible data visualizations with variants (bar, area, line, donut, radar, heat map, sparkline) for surfacing industrial data patterns, trends, and comparisons. They are often used inside a [Card](/aura-design-system/primitives/card) but can also be rendered within the parent UI container.

### When to use

* When users need to compare values over time, across categories, or against thresholds.
* When trends, distributions, or proportions are easier to understand visually than in a table.
* Inside dashboards, monitoring views, or asset detail panels where data density matters.

### When to use something else

* When users need to edit or sort raw values, use a [Data grid](/aura-design-system/primitives/data-grid) instead.
* For a single KPI or metric without a chart shape, consider [Count](/aura-design-system/primitives/count) or [Badge](/aura-design-system/primitives/badge).
* For indeterminate loading before data is ready, use [Skeleton](/aura-design-system/primitives/skeleton) or [Page loader](/aura-design-system/primitives/page-loader).

### Behavior

* Choose the variant that matches the data shape: time series (line/area), comparisons (bar), parts of a whole (donut), multi-axis patterns (radar), density (heat map), or compact inline trends (sparkline).
* Respect theme chart color tokens so series remain legible in light and dark modes.

### Often used with

* [Card](/aura-design-system/primitives/card), [Count](/aura-design-system/primitives/count), [Tabs](/aura-design-system/primitives/tabs) for dashboard layouts; [Empty state](/aura-design-system/primitives/empty-state) when no data is available.