Real-time charts for Svelte 5

Bring your data to life.

Smooth lines, live candles, and every point in between.
A small chart component for things that keep moving.

Interactive demo

Liveline index

—

Simulated price · USD

State

A few lines to get moving

Your data. A live chart.

Give the chart a height, an array of points, and the latest value. Liveline takes care of the motion.

Use Svelte’s $state to keep the feed reactive, then connect your own data source.

Explore the API

Svelte 5Canvas renderedNo CSS imports

Chart.svelte

<script lang="ts">
  import { onMount } from 'svelte'
  import { Liveline, type LivelinePoint } from 'liveline-svelte'

  let data = $state.raw<LivelinePoint[]>([])
  let value = $state(100)

  onMount(() => {
    // Replace this timer with your WebSocket or polling feed.
    const timer = setInterval(() => {
      value += (Math.random() - 0.5) * 0.8
      data = [...data, { time: Date.now() / 1000, value }].slice(-1200)
    }, 200)

    return () => clearInterval(timer)
  })
</script>

<div style="height: 300px">
  <Liveline {data} {value} color="#f97316" theme="light" />
</div>