Chart - Cognite 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.

Data tables: Use Data grid when operators require exact numeric precision, multi-attribute filtering, or row-by-row audit compliance rather than pattern scanning.
Counts: Use 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.

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.

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.

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.