Examples

Live, interactive demos of the library — each one runs the actual UrChart instance in your browser via the @urcharts/vue wrapper. Tweak the controls, watch the chart respond.

Example	What it shows
Line	Multi-series line chart with reactive series count + density
Area gradient	OKLab / OKLCh gradient fills, multi-stop, diverging
Candle	OHLC financial chart with pan + zoom
Bar	Grouped, stacked, and diverging bar layouts
Live stream	Delta protocol — append ticks at variable Hz
Pan & zoom	Per-axis pan/zoom toggle + live event readout
Themes	Hot-swap dark / light / financial-dark themes
Plugins	Toggle every built-in plugin on/off and see what changes

How they're built

Every example is a Vue 3 single-file component using <UrChart> from @urcharts/vue:

<script setup lang="ts">
import { computed, ref } from "vue";
import { UrChart } from "@urcharts/vue";
import { marks, anim, axes, type ChartOptions } from "@urcharts/core";

const points = ref(240);
const options = computed<ChartOptions>(() => ({
  series: [{ id: "a", type: "line", data: sample(points.value), color: "#38bdf8" }],
  plugins: [marks(), anim(), axes()],
}));
</script>

<template>
  <UrChart :options="options" style="width:100%;height:360px" />
</template>

Reactive options flow through chart.update(). Series are diffed by id — added series enter, removed series exit, untouched series reuse their RingBuffer.