Charts for Qwik

Chart.ts SVG rendering means zero hydration cost in Qwik. Charts render on the server as HTML and are instantly interactive. No JavaScript downloaded until user interaction. The fastest charts possible.

$npm install @chartts/core
example.tsx
// src/routes/dashboard/index.tsx
import { component$ } from "@builder.io/qwik"
import { routeLoader$ } from "@builder.io/qwik-city"
import { line } from "@chartts/core"

export const useMetrics = routeLoader$(async () => {
  return await db.getMetrics()
})

export default component$(() => {
  const metrics = useMetrics()
  const svg = line({
    data: metrics.value,
    x: "month",
    y: "revenue",
  })

  return <div dangerouslySetInnerHTML={svg} />
})

Features

Zero hydration cost
Resumable chart interactions
SVG renders as static HTML
Works with routeLoader$
Tailwind CSS integration
Instant page loads
Under 15kb gzipped
Read the DocsSee DemosExamples