Analytics Overview

Page views area chart, traffic sources pie chart, and bounce rate gauge in a dashboard layout.

Page Views
MonTueWedThuFriSatSun5K10K15K20K25K
Traffic Sources
45%25%18%12%
Bounce Rate
34Rate0100

Code

example.tsx
import { AreaChart, PieChart, GaugeChart } from "@chartts/react"

export function AnalyticsOverview() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <AreaChart data={pageViews} x="day" y="views" className="col-span-2 h-64" />
      <PieChart data={trafficSources} value="count" label="source" />
      <GaugeChart value={34} max={100} label="Bounce Rate" />
    </div>
  )
}