A live trading chart for any website.

import { useEffect, useRef } from "react";
import "tickline";

export function PriceChart({ candles, lastTick }) {
  const ref = useRef(null);
  useEffect(() => { ref.current?.setData(candles); }, [candles]);
  useEffect(() => { if (lastTick) ref.current?.tick(lastTick); }, [lastTick]);
  return <trade-chart ref={ref} symbol="BTC/USDT" timeframe="1m" style={{ height: 480 }} />;
}

<!-- vite.config: vue({ template: { compilerOptions: { isCustomElement: (t) => t === "trade-chart" } } }) -->
<script setup>
import { ref, watch, onMounted } from "vue";
import "tickline";
const props = defineProps(["candles", "lastTick"]);
const chart = ref(null);
onMounted(() => chart.value.setData(props.candles));
watch(() => props.lastTick, (t) => t && chart.value.tick(t));
</script>

<template>
  <trade-chart ref="chart" symbol="BTC/USDT" timeframe="1m" style="height: 480px" />
</template>

import { AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, ViewChild } from "@angular/core";
import "tickline";

@Component({
  selector: "app-price-chart",
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  template: `<trade-chart #chart symbol="BTC/USDT" timeframe="1m" style="height: 480px"></trade-chart>`,
})
export class PriceChartComponent implements AfterViewInit {
  @ViewChild("chart") chart!: ElementRef<any>;
  constructor(private prices: PriceService) {}
  ngAfterViewInit() {
    this.prices.history().subscribe((c) => this.chart.nativeElement.setData(c));
    this.prices.ticks().subscribe((t) => this.chart.nativeElement.tick(t));
  }
}

@* App.razor or index.html: <script src="_content/…/tickline.umd.js"></script> and tickline-interop.js *@
@inject IJSRuntime JS

<trade-chart id="chart" symbol="BTC/USDT" timeframe="1m" style="height: 480px"></trade-chart>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!firstRender) return;
        var candles = await Prices.GetCandlesAsync("BTCUSDT", "1m");
        await JS.InvokeVoidAsync("tickline.setData", "chart", candles);
        Prices.OnTick += t => JS.InvokeVoidAsync("tickline.tick", "chart", t);   // e.g. from SignalR
    }
}

// wwwroot/tickline-interop.js
window.tickline = {
  setData: (id, candles) => document.getElementById(id).setData(candles),
  tick: (id, t) => document.getElementById(id).tick(t),
};