Skip to content

Dashboard Records & Sessions chart has no legend, so its two series can only be told apart by colour #1782

Open

Description

@joshunrau

The dashboard's "Records & Sessions Trend" chart plots two series, a blue area for records and a green area for sessions, with no legend. The only way to tell which line is which is to hover a point and read the tooltip. Colour alone carries the distinction, which fails WCAG 1.4.1 (Use of Color): a colour-blind user, a user on a touch screen without hover, or anyone reading a screenshot or printout cannot tell the records line from the sessions line. The subject graph's LineGraph (components/LineGraph/LineGraph.tsx:123) already renders a recharts <Legend />; the dashboard does not import one.

Where

apps/web/src/routes/_app/dashboard.tsx:430-523. The chart has two Areas and no Legend:

<AreaChart data={combinedTrendsData} margin={{ bottom: 0, left: 0, right: 30, top: 10 }}>
  ...
  <Area dataKey="records" stroke={chartColors.records.stroke} ... />
  <Area dataKey="sessions" stroke={chartColors.sessions.stroke} ... />
</AreaChart>

The import at dashboard.tsx:10 (Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis) has no Legend, and the Areas have no name, so even a default legend would read "records" and "sessions" untranslated.

Reproduce

  1. Sign in as an admin on an instance with records and sessions (e.g. the demo data) and open the Dashboard.
  2. Look at "Records & Sessions Trend" without hovering.

Actual: two overlapping coloured areas with nothing saying which is records and which is sessions.
Expected: a legend reading "Records" and "Sessions" in the interface language, ideally also differentiated by more than colour (for example a dashed stroke on one series).

Tests

  • apps/web/src/routes/_app/__tests__/dashboard.test.tsx: it('should label both trend series in a legend, so records and sessions can be told apart without hovering'). The file already mocks recharts to expose the props the page passes, so assert that a Legend is rendered and that each Area receives a translated name.
  • testing/src/specs/dashboard.spec.ts: assert the trend chart (dashboard-chart-records-sessions) contains the "Records" and "Sessions" legend labels.

Suggested fix

Give each Area a translated name (t({ en: 'Records', ... }), t({ en: 'Sessions', ... })), add <Legend /> to the AreaChart, and set strokeDasharray on one series.

Activity

  1. added
    BugType: existing behavior is wrong
    Priority: LowNice to have, cosmetic or speculative
    Difficulty: LowIsolated change, about 2 hours or less
    Area: Webapps/web (clinician-facing React SPA)
    Good First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributor
    on Oct 7, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Area: Webapps/web (clinician-facing React SPA)BugType: existing behavior is wrongDifficulty: LowIsolated change, about 2 hours or lessGood First IssueWell-scoped, low-risk and self-contained; a good entry point for a new contributorPriority: LowNice to have, cosmetic or speculative

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions