import { LiveChart } from "livecharts/react";
import type { LiveChartPoint } from "livecharts/react";

function Chart({ data, value }: { data: LiveChartPoint[]; value: number }) {
  return (
    <div style={{ height: 200 }}>
      <LiveChart data={data} value={value} />
    </div>
  );
}

Vue

<script setup lang="ts">
import { LiveChart, LiveChartTransition } from "livecharts/vue";
import type { LiveChartPoint } from "livecharts/vue";
import { ref } from "vue";

const data = ref<LiveChartPoint[]>([]);
const value = ref(0);
</script>

<template>
  <div style="height: 200px">
    <LiveChart :data="data" :value="value" />
  </div>
</template>

Core (framework-agnostic)

import { LiveChartEngine, resolveTheme } from "livecharts";

Data helpers

Import helpers from the dedicated entry when no chart runtime is needed:

import { aggregateCandles, createWalker } from "livecharts/data";

The root livecharts entry continues to export these helpers for backward compatibility.

Monorepo packages (private)

Package	Role
`@livecharts/core`	Canvas engine — no framework
`@livecharts/react`	React `<LiveChart />` wrapper
`@livecharts/vue`	Vue 3 `<LiveChart />` + `LiveChartTransition`
`livecharts`	Published npm package (bundles the above)