Background

Result of spike T369863. To enable full visible accessibility, we need to implement patterns and nodes for charts.

User story

As a user with accessibility needs I want to be able to understand a chart

Requirements

1. Patterns are created for 10 data points (bar, pie, area)
2. Node shapes are created for 10 data points (line)

Design

• As there is a current maximum of 10 data values in any given chart, there are 10 symbols.
• Each symbol is intentionally sized and ordered. They should not be placed in a different order.
• Each symbol, depending on the type of chart, is specifically sized and colored. These aspects should not be changed.
• Refer to the demos for specific symbol, color, and sizing syntax.

Color

• The colors of each symbol appear in the order found below, are paired with the default color scheme found in T375234
• On charts which use a pattern, such as the Bar and Pie charts, the symbol color is the color listed below
• On charts which use a symbol at a data point, such as the Line and Stacked area charts, the color of the symbol is the same color as the line, while the border color (which should have borderWidth: 1 is the color listed below

"#1b223d",
"#2d2212",
"#3c1a13",
"#132821",
"#142817",
"#1b223d",
"#23203b",
"#311e28",
"#2d2212",
"#27292d"

Demos

Line

Bar

Pie

Examples

Line, light mode

Line, dark mode

Bar, light mode

Bar, dark mode

Pie, light mode

Pie, dark mode

Stacked area, light mode

Stacked area, dark mode

Acceptance criteria

• Symbols for nodes and patterns are created
• Placeholder task is created for implementation