Theming
One provider controls colours, mode, radius and font for every chart.
Palettes
palette="default"
palette="blue"
palette="green"
palette="violet"
palette="rose"
palette="orange"
palette="vivid"
Provider
tsx
<ChartProvider // or an array: ["#0ea5e9", "#f43f5e", ...] palette="violet" // "light" | "dark" | "system" mode="system" // card radius radius={12} fontFamily="Inter" tokens={{ card: "#0b0b10", border: "#1f1f2a" }}> <App /></ChartProvider>Per-series colours
Any series can override the palette with config.key.color; bars also accept getColor and negativeColor.
Read the theme
tsx
const theme = useChartTheme();<Text style={{ color: theme.mutedForeground }}>Updated just now</Text>Did you like the content?