Realtime Line Chart

Smooth rolling line chart with a built-in simulation mode for demos, and a latestPrice prop to drive it from any live data source — WebSocket, REST polling, game loop, or anything else.

Import

ts 
import { RealtimeLineChart } from 'ambar-ui';

Demo Mode

Drop it in with no data source — the component runs its own simulation. Great for prototyping and previews.

svelte 
<!-- Built-in simulation — no data source needed -->
<RealtimeLineChart label="BTC/USD" initialPrice={42000} />

Live Data (WebSocket)

Pass latestPrice to take control. The chart animates toward each new value — this demo below is driven by a simulated external feed (500 ms interval) instead of the built-in random walk.

Notice how the chart uses your data instead of its own simulation. Swap setInterval with a real WebSocket and it works identically.

svelte 
<script>
  import { onMount } from 'svelte';
  import { RealtimeLineChart } from 'ambar-ui';

  let price = $state(42000);

  onMount(() => {
    const ws = new WebSocket('wss://your-api/prices');

    ws.onmessage = (event) => {
      // Parse whatever shape your API returns
      price = JSON.parse(event.data).price;
    };

    return () => ws.close();
  });
</script>

<!--
  latestPrice  →  drives the chart from outside
  initialPrice →  sets the starting value (used before first WS message)
  tickMs       →  match your server's publish interval for smooth animation
-->
<RealtimeLineChart
  label="BTC/USD"
  initialPrice={42000}
  latestPrice={price}
  tickMs={500}
  points={120}
/>

REST Polling

No WebSocket? A simple setInterval fetch works just as well. Set tickMs to match your poll interval.

svelte 
<script>
  import { onMount } from 'svelte';
  import { RealtimeLineChart } from 'ambar-ui';

  let price = $state(0);

  onMount(() => {
    async function fetchPrice() {
      const res  = await fetch('/api/price/BTC');
      const data = await res.json();
      price = data.price;
    }

    fetchPrice();
    const id = setInterval(fetchPrice, 1000);
    return () => clearInterval(id);
  });
</script>

<RealtimeLineChart
  label="BTC/USD"
  latestPrice={price}
  tickMs={1000}
/>

Game / Crash Multiplier

Crash-game, slot volatility graph, player balance over time — push any numeric series. tickMs=100 for fast game loops.

svelte 
<script>
  import { onMount } from 'svelte';
  import { RealtimeLineChart } from 'ambar-ui';

  // Each round the multiplier ticks up, then crashes.
  // Just push each tick value into latestPrice.
  let multiplier = $state(1.00);

  onMount(() => {
    const ws = new WebSocket('wss://your-game/crash');
    ws.onmessage = (e) => {
      multiplier = JSON.parse(e.data).multiplier; // e.g. 1.05, 1.23, 2.44 …
    };
    return () => ws.close();
  });
</script>

<RealtimeLineChart
  label="Multiplier"
  initialPrice={1.00}
  latestPrice={multiplier}
  tickMs={100}
  points={80}
  height={220}
/>

API Reference

PropTypeDefaultDescription
label string'BTC/USD'Asset or metric label shown above the chart.
initialPrice number42000Starting value. Used as the seed for the built-in simulation, or as the chart's initial state before the first external price arrives.
latestPrice numberundefinedExternal live value. When provided, disables the built-in simulation and animates toward each new value you push (WebSocket, polling, game loop, etc.).
tickMs number350Animation cycle in milliseconds. Match this to your data source's publish interval for smooth scrolling.
points number120Number of data points visible in the rolling window.
height number280Chart height in pixels.
class string''Extra CSS classes applied to the root element.