Chart
ReadyThemed chart wrappers.
Requires recharts
Chest
Back
Installation
$ npx @oratiq-js/ui add chartCopies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.
Usage
import
import { useChartConfig, seriesColor, ChartContainer, ChartTooltipContent, ChartTooltip, ChartLegend } from "@/components/ui/chart";Bar and line
Chest
Back
Charts and RTL
The charting library renders SVG in physical space with no concept of writing direction. The container mirrors the whole plot under RTL and un-mirrors the text, so the value axis lands on the correct side while labels stay readable. It works, but verify any custom chart you build — this is the one place in the system where direction isn't free.
Accessibility
- Series colours walk the --chart-N tokens, which are checked for contrast against both themes.
- Never encode a series by colour alone — the legend pairs each colour with its label.
- For anything load-bearing, offer the same data as a table. A chart is unreadable to a screen reader.
View source on GitHub → components/ui/chart.tsx