Data Visualization
XEVOR NEXA represents data using the approved color system, typography, and accessibility rules.
Chart Types and When to Use Them
| Chart type | Best for | Avoid when |
|---|---|---|
| Bar | Comparing categories, ranking | Too many categories |
| Line | Trends over time | Only a few discrete points |
| Area | Stacked trends, part-to-whole over time | Categories overlap heavily |
| Donut | Simple part-to-whole (<=5 slices) | More than 5 slices |
| Scatter | Correlation, distribution | Audience needs exact ranking |
| Table | Exact values, lookup | A chart would show the pattern faster |
Color Usage
Use the dedicated analytics palette. Do not reuse action or signal colors as default chart colors. Highlight a key metric with Xevor Flare 1000 or Nexa Cluster 1000 only when calling attention to a single value.
| Token | Color name / tier | Role |
|---|---|---|
| --data-1 | Sirius Blue 1000--color-sirius-blue-1000 | Primary series |
| --data-2 | Aurora Green 1000--color-aurora-green-1000 | Secondary / positive trend |
| --data-3 | Nexa Cluster 1000--color-nexa-cluster-1000 | Tertiary / signal |
| --data-4 | Quasar Red 1000--color-quasar-red-1000 | Quaternary / negative trend |
| --data-5 | Signal Grey 1000--color-signal-grey-1000 | Neutral / disabled series |
| --data-6 | Aurel Sand 1000--color-aurel-sand-1000 | Premium / accent series |
Typography and Labels
- Axis labels and values: JetBrains Mono for tabular alignment.
- Chart titles and annotations: Exo 2 or Inter depending on hierarchy.
- Minimum label size: 12 px.
- Label color: Signal Grey 1000 on dark surfaces, Singularity Black 1000 on light surfaces.
Accessibility
- Do not rely on color alone; use patterns, labels, or direct values.
- Provide data tables or tooltips for screen-reader users.
- Maintain 4.5:1 contrast for text labels.
- Honor prefers-reduced-motion for animated charts.
PENDING Advanced chart types (area, stacked, treemap) and tooltips are pending. The Charts page has the reusable `charts.js` component with bar, line, and donut charts, and the Color page has the real data test set and CVD simulation.