On this page
Proposed CSC Standards · 0.1.0
Charts
A bar or line chart with a text alternative.
Show a trend or comparison that is also available as text or a table.
What this describes
When to use
- A small set of demonstration or production numbers that benefit from a visual comparison.
When not to use
- The only copy of the numbers. Provide a table or a list as well.
- A status. Use Badge.
Allowed variants
Bar
Compare categories.
- Hierarchy
- Column bars.
- Use in
- Dashboards.
- Restriction
- Include a text alternative.
- Accessibility
- Not color alone.
- Responsive
- Scales to the column.
Line
Show a trend.
- Hierarchy
- A line across points.
- Use in
- Time series.
- Restriction
- Include the values as text.
- Accessibility
- Title or table.
- Responsive
- Scales to the column.
Mandatory rules
Provide a text alternative for the data
The chart is decorative if a table or list repeats the numbers. Otherwise the SVG has a title.
Implementation detail
WCAG 1.1.1. A chart without a text alternative hides the data.
Pair BarChart or LineChart with a table of the same values, or give the SVG a title element.
Check: The values can be read without seeing the graphic.
Do not use color as the only series key
A legend uses text labels, not color swatches alone.
Implementation detail
WCAG 1.4.1.
Label bars or points with text, or provide a legend in words.
Check: The series can be identified in grayscale.
Let the chart scale inside the column
The SVG uses the container width and does not set a fixed width that overflows.
Implementation detail
Proposed CSC Standard. A 800px-wide chart forces page scroll at 320px.
Use the packaged charts, which size to the container. Do not set a fixed pixel width on the SVG.
Check: At 375px the chart fits the column.
Restrictions
No conditional or prohibited rules are published for this component.
Accessibility
- Text alternative.
- Series labels are words.
- The chart is not the only source of the numbers.
Responsive behavior
- The SVG is fluid.
- Legends wrap under the chart on narrow screens.
Component states
Ready
Graphic plus text alternative.
Empty
A sentence says there is no data. The graphic is not a blank box.
Correct implementation
The figure has a text title. The bars use #2A338F. A table repeats the values.
Imports: None. Dependencies: None. Rules: CHT-001.
export function Volume() {
return (
<figure>
<figcaption>Applications by month</figcaption>
<div style={{ background: '#2A338F', height: 48, width: 24 }} aria-hidden="true" />
<table><caption>Same values</caption><tbody><tr><td>January</td><td>12</td></tr></tbody></table>
</figure>
);
}Incorrect implementation
No incorrect example is published for this component.
Common mistakes
- An SVG with no title and no table.
- A fixed width wider than the phone.
- A color-only legend.
Testing checklist
Agent prompts for this component are in the AI Development Hub.