Ringo Charts

Appearance

Getting started ​

@ringover/ringo-charts ships Vue 3 chart and widget components built on chart.js and vue-chartjs. This page covers installation and the minimum wiring required in a host app.

Prerequisites ​

Peer dependencies (install them in the consuming app):

  • vue ^3.5.0
  • chart.js ^4.5.1
  • vue-chartjs ^5.3.3
  • @ringover/ringo-ui >=0.13.0
  • @ringover/styles >=3.20.0
  • @vueuse/core ^14.1.0
  • reka-ui ^2.9.3
  • @internationalized/date ^3.12.2
  • vue-i18n ^11.0.0 (optional — translated widget copy)

Node 22-24 and Bun >= 1.1 match this repo's engine range when you develop or link the package locally.

Installation ​

sh
bun add @ringover/ringo-charts chart.js vue-chartjs @vueuse/core reka-ui @internationalized/date

Wire it into a host app ​

Do the following in the host app (not just importing a component):

  1. Install @ringover/ringo-charts and its peers (vue is usually already present).
  2. Import the library CSS once — the JS entry does not inject styles (see Styles).
  3. Theming — use the plugin or call applyRingoChartTheme() (see Theming).
  4. Design tokens — components use Ringo CSS variables (e.g. --ro-colors-text-primary). Load your @ringover/ringo-ui / @ringover/styles setup so tokens match production; scoped styles include fallbacks when a variable is missing.
  5. SSR — chart components need a browser (see SSR and Nuxt).

Styles ​

Import the bundled stylesheet from your app entry (e.g. main.ts):

ts
import '@ringover/ringo-charts/style.css'

This file contains scoped styles for the exported components (built as dist/ringo-charts.css).

Global registration (plugin) ​

app.use(RingoCharts) runs applyRingoChartTheme() once and registers all exported components globally.

ts
import { createApp } from 'vue'
import App from './App.vue'
import RingoCharts from '@ringover/ringo-charts'
import '@ringover/ringo-charts/style.css'

createApp(App).use(RingoCharts).mount('#app')

Local import ​

Import only what you need. Call applyRingoChartTheme() yourself once on the client so Chart.js defaults match Ringo CSS variables.

ts
import { applyRingoChartTheme } from '@ringover/ringo-charts'
import type { ChartData, ChartOptions } from '@ringover/ringo-charts'

applyRingoChartTheme()

ChartData and ChartOptions are re-exported from chart.js for convenience.

SSR and Nuxt ​

Chart.js needs a browser canvas — do not render chart components during SSR.

Nuxt 4 ​

  1. Install the package and peers (same as above).

  2. Register the CSS in nuxt.config.ts:

    ts
    export default defineNuxtConfig({
  css: ['@ringover/ringo-charts/style.css'],
})

  3. Register the Vue plugin on the client only so applyRingoChartTheme() runs in the browser. Add plugins/ringo-charts.client.ts:

    ts
    import RingoCharts from '@ringover/ringo-charts'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(RingoCharts)
})

    For local imports instead of app.use, apply only the theme:

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

export default defineNuxtPlugin(() => {
  applyRingoChartTheme()
})

  4. Wrap chart UI in <ClientOnly> so SSR never touches Chart.js. Widgets already ship their own card chrome — no need to wrap them in <RoCard>:

    vue
    <ClientOnly>
  <RoKPIWidget v-bind="widgetProps" />
</ClientOnly>

  5. Ringo tokens — ensure @ringover/ringo-ui / @ringover/styles are loaded for full design-system alignment.

If the build fails to resolve or transpile the package (e.g. when linking locally), add it to build.transpile:

ts
export default defineNuxtConfig({
  build: {
    transpile: ['@ringover/ringo-charts'],
  },
})

Next steps ​