Charts for Remix

Chart.ts works seamlessly with Remix. Load data in loaders, render charts as SVG in routes, and stream with defer. No client JS needed for static charts. Tailwind CSS on every element.

$npm install @chartts/react
example.tsx
// app/routes/dashboard.tsx
import { json } from "@remix-run/node"
import { useLoaderData } from "@remix-run/react"
import { BarChart } from "@chartts/react"

export async function loader() {
  const metrics = await db.getMetrics()
  return json({ metrics })
}

export default function Dashboard() {
  const { metrics } = useLoaderData<typeof loader>()
  return (
    <BarChart
      data={metrics}
      x="month"
      y="sales"
      className="h-64"
      barClassName="fill-cyan-500"
    />
  )
}

Features

Works with Remix loaders and actions
SVG rendering for server-side output
Streaming support with defer
Nested route compatible
Tailwind CSS on every element
TypeScript with loader type inference
Under 15kb gzipped
Read the DocsSee DemosExamples