SvelteKit

Name: Chart.ts
Author: Chart.ts

Use Chart.ts with SvelteKit. Load data in +page.server.ts, render charts with SSR, style with Tailwind.

Installation

npm install @chartts/svelte

Basic usage with load functions

<!-- src/routes/dashboard/+page.svelte -->
<script lang="ts">
  import { BarChart } from '@chartts/svelte'
  import type { PageData } from './$types'

  export let data: PageData
</script>

<BarChart data={data.metrics} x="month" y="sales" class="h-64" barClass="fill-cyan-500" />

Server-side data loading

Load chart data in +page.server.ts:

// src/routes/dashboard/+page.server.ts
import type { PageServerLoad } from './$types'

export const load: PageServerLoad = async () => {
  const metrics = await db.getMetrics()
  return { metrics }
}

Charts receive server-loaded data and render as SSR SVG.

Stores and reactivity

Use Svelte writable or derived stores for dynamic data. Charts re-render when store values change.

import { writable, derived } from 'svelte/store'

const data = writable(initialData)
const filtered = derived(data, $d => $d.filter(item => item.active))

Form actions

Update chart data through SvelteKit form actions. After an action completes, load functions re-run and charts update with fresh data automatically.

Static adapter

Chart.ts works with @sveltejs/adapter-static. Charts render at build time as SVG HTML. Perfect for static dashboards and documentation sites.

Svelte Getting Started