shadcn-svelte

Are you an AI agent?

Chart blocks for shadcn-svelte. Also for shadcn/ui and shadcn-vue. All blocks on one page ↗

01 — PICK A BLOCK
02 — ADD IT
It adds $lib/components/chart-candlestick.svelte and the card and wick-chart components it uses.
npx shadcn-svelte@latest add https://wick-charts.eeff.io/r/svelte/chart-candlestick.json
03 — USE IT
The block draws demo data. To draw yours, replace it in chart-candlestick.svelte and pass your array to <CandlestickSeries>. Data format: Candlestick.
<script lang="ts">
  import ChartCandlestick from '$lib/components/chart-candlestick.svelte';
</script>
 
<ChartCandlestick />
04 — BUILD YOUR OWN CHART
Add the chart container of the blocks: npx shadcn-svelte@latest add https://wick-charts.eeff.io/r/svelte/wick-chart.json. It takes the colors and dark mode of your shadcn-svelte theme. Set the size with classes, the default is aspect-video.
<script lang="ts">
  import { LineSeries, TimeAxis, type TimePoint, Tooltip, YAxis } from '@wick-charts/svelte';
 
  import { WickChart } from '$lib/components/ui/wick-chart/index.js';
 
  let { data }: { data: TimePoint[] } = $props();
</script>
 
<WickChart class="aspect-auto h-[250px]">
  <LineSeries {data} />
  <YAxis />
  <TimeAxis />
  <Tooltip />
</WickChart>
Chart colors: