useLiveChartEngine

import { useLiveChartEngine } from "livecharts/react";

Thin adapter: mounts an engine once, pushes config after commit, destroys on unmount.

function CustomChart({ config }: { config: HookConfig }) {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const valueDisplayRef = useRef<HTMLSpanElement>(null);

  useLiveChartEngine(canvasRef, containerRef, {
    ...config,
    valueDisplayRef,
  });

  return (
    <div ref={containerRef} style={{ position: "relative", height: 240 }}>
      <canvas ref={canvasRef} />
      <span ref={valueDisplayRef} />
    </div>
  );
}

HookConfig is EngineConfig with valueDisplay replaced by valueDisplayRef so the span can mount before the engine reads it.

Prefer <LiveChart /> unless you need custom DOM around the canvas.