nemodar-chart

Vue 3 candlestick chart with TradingView-style drawing tools on lightweight-charts.

The chart does not fetch your API. You load OHLC in the host app and pass candles.

Install

npm install nemodar-chart vue lightweight-charts

vue (^3.5.0) and lightweight-charts (^5.2.1) are peer dependencies. ESM-only.

Usage

<script setup lang="ts">
import { ref, watch } from 'vue'
import { Chart, type ChartCandle, type ChartInterval, type ChartRange, type ChartSymbol } from 'nemodar-chart'
import 'nemodar-chart/styles.css'

const symbol: ChartSymbol = { id: 'XAUUSD', title: 'XAU / USD' }
const interval = ref<ChartInterval>('15m')
const range = ref<ChartRange>('24h')
const candles = ref<ChartCandle[]>([])
const lastPrice = ref<number | null>(null)
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    const rows = await fetchYourOhlc({ interval: interval.value, range: range.value })
    candles.value = rows.map((row) => ({
      time: Math.floor(new Date(row.date).getTime() / 1000),
      open: row.open,
      high: row.high,
      low: row.low,
      close: row.close,
    }))
  } finally {
    loading.value = false
  }
}

watch([interval, range], load, { immediate: true })
</script>

<template>
  <Chart
    :symbol="symbol"
    :candles="candles"
    :last-price="lastPrice"
    :loading="loading"
    :empty="!candles.length"
    storage-key="demo"
    v-model:interval="interval"
    v-model:range="range"
  />
</template>

time is UNIX seconds, not milliseconds. Import nemodar-chart/styles.css once.

When the user changes interval or range, update your fetch and replace candles. Pass live ticks as lastPrice. For bid/ask last-price lines (MetaTrader-style), also pass askPrice and bidPrice; dual lines appear only when both are finite numbers.

Props

| Prop | Type | Role | |---|---|---| | symbol | { id, title, logo? } | Header title / logo | | candles | { time, open, high, low, close }[] | OHLC | | lastPrice | number \| null | Live last price (updates the forming candle) | | askPrice | number \| null | Live buy/ask; with bidPrice shows two last-price lines | | bidPrice | number \| null | Live sell/bid; with askPrice shows two last-price lines | | loading | boolean | Loading message | | empty | boolean | Empty message | | symbols | ChartSymbol[] | Header symbol search | | storageKey | string | localStorage key for drawings | | v-model:interval | 1m … 1M | Timeframe | | v-model:range | 1h | 24h | 7d | 30d | Range chips | | @select-symbol | id | Symbol picked in the header |

Versions

After you publish a new version (0.1.1, 0.2.0, …):

npm install nemodar-chart@latest

Use "nemodar-chart": "^0.1.0" so npm update receives compatible updates.

Maintainers: from the repo root, npm version patch -w nemodar-chart then npm publish -w nemodar-chart --access public.

License

MIT