Vue 3

npm install @kumochart-sdk/core @kumochart-sdk/vue

The adapter is a thin layer over the core: a component for templates and a composable for custom setups. Everything else goes through the chart instance.

Component

<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { TradingChart } from '@kumochart-sdk/vue';
import type { BarInput, Chart, OrderInput, PriceDragEvent } from '@kumochart-sdk/core';

const bars = shallowRef<BarInput[]>(await api.bars());
const orders = ref<OrderInput[]>([{ id: 'o-1', side: 'buy', price: 101.5, label: 'LIMIT' }]);
const chart = shallowRef<Chart | null>(null);

function onReady(instance: Chart) {
  chart.value = instance;
  instance.indicators.add({ type: 'MACD' });
  socket.onmessage = (message) => instance.data.update(JSON.parse(message.data));
}

function onOrderDrag({ id, phase, price }: PriceDragEvent) {
  if (phase === 'end') {
    orders.value = orders.value.map((order) => (order.id === id ? { ...order, price } : order));
  }
}
</script>

<template>
  <TradingChart
    class="chart"
    :data="bars"
    :orders="orders"
    :options="{ locale: 'zh-CN', latestPrice: { countdown: true } }"
    @ready="onReady"
    @order-drag="onOrderDrag"
    @load-more="({ before }) => loadOlder(before)"
  />
</template>

<style scoped>
.chart {
  height: 520px;
}
</style>

Props

Prop	Applied with
options	chart.applyOptions() (deep-watched)
data	chart.data.set() whenever the array is replaced
interval	Passed to chart.data.set() with data, e.g. '1m'
timeframe	chart.data.setTimeframe(), e.g. '15m'; null shows the source
transform	chart.data.setTransform(), e.g. { type: 'renko' }; null shows the timeframe's bars; an equal value does not rebuild
orders	chart.orders.set() (deep-watched)
markers	chart.markers.set() (deep-watched)
alerts	chart.alerts.set() (deep-watched)
configure	Runs once right after the chart is created, before the other props: register extras, custom types or plugins

data is watched by reference only, so a large array costs nothing between updates. Stream bars with chart.data.update() or trades with chart.data.addTrades() instead of rebuilding the array; replace the array to load a new symbol. With interval set, switch timeframes through the timeframe prop rather than loading new data (see Timeframes and replay).

Indicators, panes, drawings and the view are user-editable and saved with chart.saveState(); manage them through the instance.

Events

Every chart event is re-emitted in kebab case: @crosshair-move, @visible-range-change, @load-more, @click, @double-click, @context-menu, @selection-change, @pane-resize, @drawings-change, @tool-change, @order-drag, @alert-drag, @button-click, @alert-trigger, @replay. @ready passes the chart instance once it is created.

Getting the instance

@ready passes the chart once it is created; keep it in a shallowRef to call the API from anywhere in the component, as in the example above.

Composable

useTradingChart() creates a chart in any element you render and destroys it on unmount:

<script setup lang="ts">
import { useTemplateRef, watchEffect } from 'vue';
import { useTradingChart } from '@kumochart-sdk/vue';

const container = useTemplateRef<HTMLDivElement>('container');
const chart = useTradingChart(container, () => ({ theme: isDark.value ? darkTheme : lightTheme }));

watchEffect(() => chart.value?.data.set(bars.value));
</script>

<template>
  <div ref="container" class="chart" />
</template>

The second argument may be options, a ref or a getter; changes are applied with applyOptions().

Other frameworks

The Vue adapter is about 150 lines of public API calls. The React adapter follows the same approach, and so would Svelte, Angular or Web Components: create the chart in an effect, destroy it on cleanup, call set() when props change and forward chart.on() events.