Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

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

Open Beginner friendly
  • Is something wrong?
#1,782 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
88/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
react, typescript
Domain
accessibility, frontend

Research direction

Start in apps/web/src/routes/_app/dashboard.tsx around lines 430–523 and review the existing Legend usage in components/LineGraph/LineGraph.tsx. Add translated names and a legend for the records and sessions areas, then run the dashboard unit test and the dashboard browser test named in the issue. Done when both series have translated legend labels and can be identified without hovering.

Written by the indexing model from the issue text.

Description

Area: Web Bug Difficulty: Low Good First Issue Priority: Low

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.

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 2h
Merged PRs (30d)
56

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.