Ringo ChartsThe Widget library documentation

A presentation-pure Vue 3 chart and widget library. Pass display props, get Ringover-themed charts and widgets — no API coupling.

Get started

Architecture

Open Storybook

Presentation pure

Components accept display props (title, value, rows, loading, error) and render HTML / Canvas / SVG. They know nothing about POST /statistics, saved views, or the widget catalog — hosts map data to props.

Chart primitives + business widgets

Low-level chart organisms (RoBarChart, RoLineChart, RoDonutChart, …) and 15 master business widgets (RoKPIWidget, RoTableWidget, …) following Atomic Design.

Live catalog in Storybook

Every component and state is documented in Storybook with mock fixtures. This site links straight to each component's Storybook page.

Ringover theming

Charts align with the design system through --ro-* CSS variables via applyRingoChartTheme(). One theme, consistent everywhere.

What is `@ringover/ringo-charts`?

@ringover/ringo-charts is a private Vue 3 library of pure presentation components. It wraps Chart.js, D3 and Leaflet into reusable Vue components that any Ringover app (dashboard, monitoring, webapp) can install without coupling to the stats API.

This site is the documentation bible: how to install it, how it is architected, how to theme it, and what each component does — with deep links into Storybook for live, interactive demos.