vue-relative-rotation-chart

Build interactive stock, ETF, sector, index, and portfolio-holdings rotation charts in Vue 3.

vue-relative-rotation-chart is an SVG component for Relative Rotation Graph (RRG)-style visualizations. Plot precomputed relative strength and momentum values against a benchmark, display securities in Leading, Weakening, Lagging, and Improving quadrants, and animate historical movement with trails and timeline playback.

Live demo: GitHub Pages · npm · local: npm run dev

What it renders (and what it does not)

Renders: precomputed RS-Ratio (x) and RS-Momentum (y) trails per ticker, quadrant labels, tails, labels, viewport modes, optional controls panel, playback scrubber, PNG/SVG export, and theming via CSS variables.

Does not: fetch prices, calculate RS-Ratio or RS-Momentum, cache data, or emit trading signals. Your application computes scores and passes RrgRenderSeries[] with ISO date, x, y, and quadrant per point.

Install and minimal example

npm install vue-relative-rotation-chart

<script setup lang="ts">
import { ref } from 'vue'
import {
  RrgChart,
  RrgPlaybackControls,
  collectSeriesDates,
} from 'vue-relative-rotation-chart'
import type { RrgRenderSeries } from 'vue-relative-rotation-chart'
import 'vue-relative-rotation-chart/style.css'

const series: RrgRenderSeries[] = [{
  ticker: 'XLK',
  label: 'XLK',
  name: 'Technology',
  points: [
    { date: '2024-01-05', x: 102, y: 101, quadrant: 'leading' },
    { date: '2024-01-12', x: 103.5, y: 100.5, quadrant: 'leading' },
    { date: '2024-01-19', x: 104, y: 99.5, quadrant: 'weakening' },
  ],
}]

const selectedDate = ref('2024-01-19')
const dates = collectSeriesDates(series)
const playing = ref(false)
const speed = ref(2)
</script>

<template>
  <RrgChart :series="series" :selected-date="selectedDate" :tail-length="10" />
  <RrgPlaybackControls
    :dates="dates"
    v-model:selected-date="selectedDate"
    v-model:playing="playing"
    v-model:speed="speed"
  />
</template>

Peer dependency: Vue ^3.5.0. Subpath vue-relative-rotation-chart/scenarios is ESM-only (import).

Module formats: bundlers should use import (ESM). Node require() resolves to the CommonJS build (vue-relative-rotation-chart.cjs). There is no browser <script> CDN bundle — host Vue and D3 yourself if you need globals.

Use collectSeriesDates(series) for the playback timeline — do not assume every ticker shares the same dates. Tickers without a point on the resolved selectedDate are hidden for that frame (no interpolation).

Chart + controls integration

Bind v-model:visible-tickers on both RrgChart and RrgChartControlsPanel so show/hide/solo updates the chart:

<script setup lang="ts">
import { ref } from 'vue'
import {
  RrgChart,
  RrgChartControlsPanel,
  RrgPlaybackControls,
  collectSeriesDates,
  seriesTickers,
} from 'vue-relative-rotation-chart'
import type { RrgRenderSeries, RrgLabelMode, RrgViewportMode } from 'vue-relative-rotation-chart'
import 'vue-relative-rotation-chart/style.css'

const series: RrgRenderSeries[] = [/* … */]
const visibleTickers = ref(seriesTickers(series))
const selectedDate = ref(series[0]?.points.at(-1)?.date ?? '')
const dates = collectSeriesDates(series)
const viewportMode = ref<RrgViewportMode>('fit')
const tailLength = ref(10)
const labelMode = ref<RrgLabelMode>('auto')
const showTailFade = ref(false)
const playing = ref(false)
const speed = ref(2)
</script>

<template>
  <RrgChartControlsPanel
    v-model:visible-tickers="visibleTickers"
    v-model:viewport-mode="viewportMode"
    v-model:tail-length="tailLength"
    v-model:label-mode="labelMode"
    v-model:show-tail-fade="showTailFade"
    :series="series"
  />
  <RrgChart
    :series="series"
    :selected-date="selectedDate"
    v-model:visible-tickers="visibleTickers"
    :viewport-mode="viewportMode"
    :tail-length="tailLength"
    :label-mode="labelMode"
    :show-tail-fade="showTailFade"
  />
  <RrgPlaybackControls
    :dates="dates"
    v-model:selected-date="selectedDate"
    v-model:playing="playing"
    v-model:speed="speed"
  />
</template>

selectedDate snaps to the nearest series date when missing (data-date-status="snapped"). Empty series shows empty-state UI.

Data invariants

| Expectation | Behavior | |-------------|----------| | Sorted dates per series | Required — unsorted input is undefined | | Sparse / heterogeneous dates | Use collectSeriesDates; missing tickers hide per frame | | Replace series reference | Required when point data changes (no in-place mutation) | | quadrant enum | leading · weakening · lagging · improving |

Adapter pattern for host data:

export function toRrgSeries(hostSeries: YourSeries[]): RrgRenderSeries[] {
  return hostSeries.map((s) => ({
    ticker: s.symbol,
    label: s.symbol,
    name: s.name,
    points: s.frames.map((f) => ({
      date: f.isoDate,
      x: f.rsRatio,
      y: f.rsMomentum,
      quadrant: f.quadrant,
    })),
  }))
}

See RrgChartProps JSDoc in the published types for the full contract.

Theming, accessibility, and SSR

Theming — override --rrg-* CSS variables on the chart root (quadrant fills, grid, labels, point colors). Control chrome uses --rrg-ctl-* tokens. Optional copy / controlsCopy props localize strings; formatters customize numbers.

Accessibility — SVG title/description, keyboard-activatable points, playback live region. Prefer tickerLabelAlwaysVisible for colorblind / monochrome identity.

SSR — static chart markup can render on the server. Playback (requestAnimationFrame) and ResizeObserver require a browser; guard playing: true until client mount if you SSR playback controls.

Export and performance

Export — exportPng() and getSvgElement() on the chart ref. PNG rasterizes computed styles; complex themes may need verification.

Performance (engineering baseline, not a guarantee) — under the default Playwright FPS fixture (scenario=default, 8 tickers, tailLength=10, Chromium, Layer B harness in tests/perf/), median frame rate stayed above 55 FPS in local runs on 2026-08-03. The long-playback profile (longPlayback200, still capped tailLength=10) is also tracked as a soft target in the same harness. Results vary by hardware, dataset size, tail length, and host layout — treat these as contributor baselines, not a consumer SLA. Full-history stress (100 tickers × 500 points via PERF_STRESS=1) is ceiling testing only.

Chart props (summary)

| Prop | Type | Default | Notes | |------|------|---------|--------| | series | RrgRenderSeries[] | — | Precomputed trails (required) | | selectedDate | string | — | ISO date; snapped if missing | | visibleTickers | string[] | — | Optional v-model | | tailLength | number | 10 | Historical points in tail | | viewportMode | 'fit' \| 'max' \| 'center' | 'fit' | Fit-All default | | labelMode | 'auto' \| 'always' \| 'hover' | 'auto' | Spatial-bin collision | | tickerLabelAlwaysVisible | boolean | false | Identity override | | showTailFade | boolean | false | Tail opacity gradient | | copy / formatters | objects | — | Localization hooks |

Optional components: RrgViewportControls, RrgSeriesVisibilityControls, RrgDisplaySettingsControls, RrgChartControlsPanel, RrgPlaybackControls.

Fixtures: import { scenarioFixtures } from 'vue-relative-rotation-chart/scenarios'.

Non-goals

• Market data fetching or indicator calculation
• React / vanilla JS builds
• Trading signals or financial advice
• Official JdK RRG formula parity (independent RRG-style renderer)

FAQ

What is an RRG? A scatter chart of RS-Ratio vs RS-Momentum used to track rotation through four phases relative to a benchmark.

Does this calculate scores? No — presentation only. Compute in your backend or app, then pass precomputed points.

Can I use this for sector rotation dashboards? Yes — one series per sector or ticker. See the live demo.

Trademark note

Relative Rotation Graph and RRG are trademarks of their respective owners. This component is developed independently and is not endorsed by RRG Research.

Semver (0.x)

Pre-1.0 may change between minors. Fragile surfaces: RrgQuadrant enum, playback v-model names, controls panel v-models, copy shapes, visual defaults. Only types and values exported from vue-relative-rotation-chart and vue-relative-rotation-chart/scenarios are semver-guaranteed; rolled-up .d.ts files intentionally omit internal component/composable declarations. See CHANGELOG.

Links

• Live demo
• CONTRIBUTING
• SECURITY
• CHANGELOG

npm install && npm run dev    # demo at http://localhost:5173
npm test && npm run build     # library → dist/