Remix

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" />
}

Use Remix's defer for slow data sources. Chart.ts components work with Suspense boundaries - render a skeleton while data loads, then swap in the chart.

import { defer } from '@remix-run/node'
import { Await, useLoaderData } from '@remix-run/react'
import { Suspense } from 'react'
import { LineChart } from '@chartts/react'

export async function loader() {
  return defer({ metrics: db.getMetrics() })
}

export default function Dashboard() {
  const { metrics } = useLoaderData<typeof loader>()
  return (
    <Suspense fallback={<div className="h-64 animate-pulse card" />}>
      <Await resolve={metrics}>
        {(data) => <LineChart data={data} x="month" y="revenue" />}
      </Await>
    </Suspense>
  )
}