Bar Chart

Features

• Segmented Day/Week/Month control with a spring-animated slider indicator
• Slim width-capped range bars with per-bar marker dots and a staggered springy scaleY entrance
• Animated min–max stat headline in tabular numerals that counts up whenever the dataset changes
• Dashed average line at the dataset mean with an uppercase compact label
• Right-hand value axis with 0 / mid / max ticks in compact k-format, aligned to the gridlines
• Hover tooltip with exact value and label; sibling bars dim while one is hovered
• Today's bar is emphasized with a stronger accent fill and a primary-colored label
• Context menu on the header dots button and on bar right-click, with full keyboard navigation
• Skeleton loading state with shimmer shown before the first render
• Visually-hidden data table mirrors the chart for screen readers
• Reduced-motion support shows the final chart state instantly

Accessibility

Tabs

role="tablist" with role="tab", aria-selected, and aria-label per tab

Chart region

.cht-bars uses role="img" with a descriptive aria-label

Axis and average

aria-hidden decorations — the hidden table carries the data

Bars

Each bar is focusable with an aria-label of label and value

Context menu

role="menu"/role="menuitem" with arrow-key, Home/End, and Escape handling

Data table

Visually-hidden <table> mirrors the chart data for screen readers

Focus indicators

:focus-visible outline using the --ring token

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Bar Chart in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the chart is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.