Ringo Charts

Appearance

Theming ​

Charts align with the design system through Ringover CSS custom properties (--ro-* variables). One function wires Chart.js defaults to those tokens.

applyRingoChartTheme() ​

applyRingoChartTheme() maps Chart.js defaults to CSS variables such as:

  • --ro-colors-text-primary
  • --ro-colors-border-regular
  • --ro-font-family

If your host app loads the Ringo styles (or defines these variables), charts match the design system automatically. On the server the function is a no-op (no window).

Call it once on the client:

ts
import { applyRingoChartTheme } from '@ringover/ringo-charts'

applyRingoChartTheme()

The plugin (app.use(RingoCharts)) calls it for you.

Where the tokens come from ​

The --ro-* variables are shipped by @ringover/styles (the design-system token package, consumed transitively through @ringover/ringo-ui). Load that stack in your host app so colors, typography, spacing and radii match production. The library's scoped styles include sensible fallbacks when a variable is missing, so charts still render without the full token set — they just will not be brand-exact.

Light / dark and product themes ​

Theming follows the same data-ro-* attributes used across the Ringover apps:

  • data-ro-mode="light" | "dark" — color mode.
  • data-ro-theme="webapp" | "dashboard" | "empower" — product theme.

Set them on the document root (e.g. <html data-ro-mode="light" data-ro-theme="webapp">), exactly as the host app does. Storybook exposes both as toolbar globals so you can preview every component in light / dark and across product themes.

Component styling rules ​

Inside the library, components use <style scoped> and the --ro-* variables only — there is no Tailwind in the published components. This keeps the package standalone and SSR-safe. See the Architecture page for the full stack policy.