> ## 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. > ## Agent Instructions > Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale. > Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML. > For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts// and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript. > Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md. > For implementation work, also load /skill.md. # Chart > Flexible data visualizations with variants for surfacing industrial data patterns, trends, and comparisons — from asset performance to sensor readings to operational status. v1.0.0 | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-chart--docs) ## Chart types * **Line:** Tracks continuous variables over time. Example: Monitoring motor bearing temperature (°C) continuously over 24 hours to spot overheating trends. * **Area:** Illustrates cumulative volume or part-to-whole quantitative totals over time. Example: Displaying total plant energy draw (kW) stacked by power source (Grid, Solar, Generator). * **Bar:** Compares discrete categorical values. Example: Comparing total unscheduled downtime hours across 5 distinct assembly lines per quarter. * **Pie:** Shows proportional breakdowns of a whole (100%) across 2–5 categories max. Example: Displaying the overall ratio of maintenance budget spent on preventive vs. reactive repairs. * **Donut:** Shows proportional breakdowns while using the center space for a critical summary KPI. Example: Fleet status distribution (Active, Maintenance, Idle) with total asset count in the center. * **Radar:** Compares multiple normalized metrics for a single entity against a benchmark. Example: Evaluating Overall Equipment Effectiveness (OEE) dimensions (Availability, Performance, Quality) against target baselines. * **Sparkline:** Micro-charts stripped of axes for dense, inline data contexts. Example: Embedding real-time hydraulic pressure trends directly inside a SCADA equipment status table row. * **Heatmap:** Visualizes magnitude or density across two independent variables (often time and location/entity). Example: Mapping machine fault frequency across a matrix of 7 days by 24 shift hours to spot high-risk shifts. ## When to use something else * **Data tables:** Use [Data grid](/cdf/aura/primitives/data-grid) when operators require exact numeric precision, multi-attribute filtering, or row-by-row audit compliance rather than pattern scanning. * **Counts:** Use [Count](/cdf/aura/primitives/count) when displaying a single real-time scalar value (e.g., "Current flow rate: 42 L/min") where historical context is irrelevant. * **Gantt / Process diagrams:** Use for sequential process dependencies, batch execution steps, or maintenance timelines rather than continuous numerical data. ## Dos and don'ts * **Do** start Y-axes at zero for Bar charts to maintain accurate metric proportions. * **Do** limit Line charts to 3–4 series; use hover states or toggles to isolate data. * **Do** sort Bar and Pie charts by value (descending) unless representing a temporal sequence. * **Do** include explicit units of measurement (°C, PSI, RPM) on tooltips and axes. * **Don't** truncate Y-axes artificially on comparison charts to exaggerate minor variations. * **Don't** create "spaghetti charts" with 8+ overlapping lines that obscure trends. * **Don't** use more than 5 slices in Pie/Donut charts or rely on 3D/exploded visual effects. * **Don't** omit axis labels or force users to calculate values using ambient grid lines alone. ## Behavior * **Crosshairs and tooltips:** Render synchronized vertical crosshairs across aligned time-series charts on hover to show exact multi-sensor values at a single timestamp. * **Legend filtering:** Allow operators to click legend items to toggle series visibility, instantly decluttering multi-line SCADA plots. * **Zooming and panning:** Enable domain scrubbing or box-zoom controls for high-frequency time-series datasets (e.g., 100 Hz vibration signals) to inspect transient anomaly spikes. * **Responsive scaling:** Reduce axis tick density, move legends below the chart container, or convert detailed charts into Sparklines/Stat callouts on constrained screen sizes. ## Color guidelines * **Reserve semantic colors:** Reserve red (failure/critical), amber/yellow (warning/alert), and green (normal/optimal) exclusively for operational status and system health. Never use them for arbitrary categorical data (e.g., distinguishing Factory A from Factory B). * **Sequential gradients:** Use monochromatic lightness scales (e.g., light Fjord to dark Fjord) to represent intensity, temperature, or density in Heatmaps and Area charts. * **Accessibility and redundancy:** Avoid relying solely on hue to differentiate series. Combine color-blind safe palettes (e.g., Okabe-Ito) with stroke styles (solid, dashed, dotted) or point markers for critical line graphs. * **Contrast standards:** Ensure chart lines, bars, and data points maintain a minimum 3:1 contrast ratio against the background, and 4.5:1 for axis labels and tooltip text. ## Often used with * [Card](/cdf/aura/primitives/card), [Count](/cdf/aura/primitives/count), [Tabs](/cdf/aura/primitives/tabs) for dashboard layouts; [Empty state](/cdf/aura/primitives/empty-state) when no data is available.