Page MenuHomePhabricator

Apply symbol functionality
Open, LowPublic

Description

Background

For readers who are unable to distinguish between colors in any given chart, we should allow the enabling of symbols/patterns. Enabling this feature should be reader controlled, not editor controlled, since it is about the accessibility of the end user, or reader.

Refer to T375313: Define pattern/node scheme for accessible charts for design details in regards to symbols/patterns.

Open questions

  1. How should a reader enable/disable this functionality?
  2. Should the patterns be the default on charts? Yes, but it should be easily enabled on each chart individually (on each chart) or globally (from user preferences for all charts).

Acceptance criteria

  • Symbols can be turned on for charts which don't use a filled background (line, scatter, etc.)

Event Timeline

https://gitlab.wikimedia.org/repos/mediawiki/services/chart-renderer/-/tree/T393232-symbols?ref_type=heads

Here is an initial implementation (rendered at mobile size), with GDP of 3 countries from 1960-2024

Screenshot 2025-05-04 at 10.25.37 AM.png (1×816 px, 114 KB)

With this many data points, the chart is a bit crowded and difficult to read.

Possible solutions:

  • maybe make the symbols a little bit smaller
  • add showSymbols as a chart definition option
  • showSymbols if number of data points is below some threshold
  • if number of series is small enough, we could show labels for each line
  • showSymbols (or labels) could be a setting in the chart in the "action" toolbar (upper right corner of chart)
  • we could have option to show the data as a table
  • option to download data as csv
  • hover tooltips can help for those with JavaScript enabbled and can do tooltips
  • maybe other accessibility with aria-label, description etc.

Whatever we decide, we need to start with the most simple solution and then iterated as needed/desired.