Indy Charts

Appearance

Indy ChartsFinancial charting, batteries included

Candlesticks, volume, and ten-plus technical indicators on Chart.js — Vue, React, Angular, or vanilla JS.

Install
Quick start
API reference
📊

Price + volume charts

Candlestick and volume rendered in one canvas, with sensible defaults out of the box.

See overlay example

📈

Built-in indicators

SMA, EMA, RSI, MACD, Bollinger Bands, and more. Standalone oscillators or paired with the price chart.

See oscillator example

🎨

Light + dark themes

Auto-syncs with VitePress dark mode. Per-instance or site-wide background overrides.

Theme docs

🔌

Bring your own data

Use the bundled API client or hand the chart pre-loaded Quote[] — no API required.

Static data example

📦

TypeScript first

Strict types, ES2020 target, Canvas + fetch APIs only. Runs in every modern browser.

⚡

250+ bars, instant pan

Tuned for large daily-quote datasets with non-intersecting tooltips and animation-free updates.

See it in action ​

A price chart with an EMA overlay:

A standalone RSI oscillator:

An oscillator paired with the price chart (:with-overlay="true"):

Each instance is independent and manages its own ChartManager. Drop as many as you want on a page.

Install ​

bash
npm install @facioquo/indy-charts chart.js chartjs-plugin-annotation
bash
pnpm add @facioquo/indy-charts chart.js chartjs-plugin-annotation
bash
yarn add @facioquo/indy-charts chart.js chartjs-plugin-annotation

Use it ​

In any TS/JS project:

typescript
import { createApiClient, OverlayChart, setupIndyCharts } from "@facioquo/indy-charts";

setupIndyCharts();

const client = createApiClient({ baseUrl: "https://api.example.com" });
const quotes = await client.getQuotes();

const canvas = document.getElementById("chart") as HTMLCanvasElement;
const chart = new OverlayChart(canvas, { isDarkTheme: false, showTooltips: true });
chart.render(quotes.slice(-250));

In Vue / VitePress, register the adapter once and use the global component:

typescript
// .vitepress/theme/index.ts (or main.ts)
import { setupIndyChartsForVue } from "@facioquo/indy-charts/vue";

export default {
  enhanceApp({ app }) {
    setupIndyChartsForVue(app, {
      api: { baseUrl: "https://api.example.com" },
      indicators: { ema: { uiid: "EMA", params: { lookbackPeriods: 20 } } }
    });
  }
};
vue
<ClientOnly>
  <StockIndicatorChart indicator="ema" />
</ClientOnly>

Under the hood ​

Built on Chart.js. Runs anywhere ES2020 + Canvas + fetch are available — every browser shipped in the last few years. Source: github.com/facioquo/stock-charts.