Charts
Athena charts use Chart.js with local assets, CSS custom properties, responsive sizing, reduced-motion handling, and accessible summaries beside each chart.
Initialisation
Add data-athena-chart to a canvas and load assets/js/athena-charts.js. Athena initialises matching canvases on page load.
Theme Tokens
Chart colours come from --athena-chart-1 through --athena-chart-5, with axis and grid colours pulled from text and border tokens.
Accessibility
Give each canvas an aria-label, role="img", and nearby text summary that explains the trend without requiring colour perception.
Motion
Chart animation is disabled automatically when the visitor requests reduced motion.