https://github.com/jakzo/slo-chart

Example of an accessible chart.
https://github.com/jakzo/slo-chart

Last synced: 3 months ago
JSON representation

Example of an accessible chart.

• Host: GitHub
• URL: https://github.com/jakzo/slo-chart
• Owner: jakzo
• Created: 2022-04-16T02:56:30.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-18T09:15:26.000Z (about 3 years ago)
• Last Synced: 2025-01-13T20:14:34.057Z (5 months ago)
• Language: Svelte
• Size: 256 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Example of an accessible chart.

[Demo](https://jakzo.github.io/slo-chart/)

![Screenshot](./screenshot.png)

## Why is this chart better than other charts?

- Individual days can be selected and read by screen readers

  - Pressing TAB allows selecting a day or clicking with the mouse

- The chart is SSR compatible and will render even if JS is disabled

  - Everything works with JS disabled except for the tooltip on hover

- Responsive design

  - Resizing the window will cause the chart to resize with no loss in quality

  - It is even responsive when JS is disabled!

- Animation which respects `prefer-reduced-motion`

  - If the user has this OS preference set then the bars and line will fade in instead of moving on load

- Dark theme based on `prefers-color-scheme`

  - Chooses between dark and light theme based on OS preference