GitHub

Points Chart

React chart for points over time. Displays trends, campaigns, and seasonality in gamification analytics views. Complements badges and levels. Built on Recharts + shadcn/ui + Tailwind. Open source.

Points Chart shows how gamification momentum shifted over time—spikes after launches, steady grind weeks, or drops when engagement cools. Use on dashboards alongside Points Badge or Points Levels List so gamification trends and point totals stay aligned.

Your points

Installation

npx shadcn@latest add https://ui.trophy.so/points-chart

Usage

Import the component:

import { PointsChart } from "@/components/ui/points-chart"

Examples

Basic Usage

Your points

<PointsChart
  data={[
    { date: "Fri", total: 0, change: 0 },
    { date: "Sat", total: 125, change: 125 },
    { date: "Sun", total: 290, change: 165 },
    { date: "Mon", total: 420, change: 130 },
    { date: "Tue", total: 680, change: 260 },
    { date: "Wed", total: 940, change: 260 },
    { date: "Thu", total: 1250, change: 310 },
  ]}
/>

With Levels

Add bronze, silver, and gold level markers on the Y-axis with matching dashed threshold lines.

Your points

<PointsChart
  data={[
    { date: "Fri", total: 120, change: 120 },
    { date: "Sat", total: 260, change: 140 },
    { date: "Sun", total: 520, change: 260 },
    { date: "Mon", total: 710, change: 190 },
    { date: "Tue", total: 890, change: 180 },
    { date: "Wed", total: 1120, change: 230 },
    { date: "Thu", total: 1320, change: 200 },
  ]}
  levels={[
    { value: 250, color: "#CD7F32" },
    { value: 500, color: "#C0C0C0" },
    { value: 1000, color: "#D4AF37" },
  ]}
/>

Period Selector

Use a top-right selector to switch between date ranges and granularity presets.

Your points · Last 7 days

const [period, setPeriod] = useState("last-7-days")

<PointsChart
  title={`Your points · ${periodLabel}`}
  data={periodData}
  headerRight={
    <select value={period} onChange={(event) => setPeriod(event.target.value)} className="rounded-md border bg-background px-2 py-1 text-xs text-foreground">
      <option value="last-7-days">Last 7 days</option>
      <option value="last-4-weeks">Last 4 weeks</option>
      <option value="last-3-months">Last 3 months</option>
      <option value="last-6-months">Last 6 months</option>
      <option value="last-12-months">Last 12 months</option>
      <option value="year-to-date">Year to date</option>
      <option value="all-time">All time</option>
    </select>
  }
/>

With Trophy

Use the Trophy SDK to fetch points time-series data server-side:

import { TrophyApiClient } from '@trophyso/node';

const trophy = new TrophyApiClient({
  apiKey: 'YOUR_API_KEY'
});

const response = await trophy.users.pointsEventSummary("user-id", "points-system-key", {
  aggregation: "daily",
  startDate: "2024-01-01",
  endDate: "2024-01-31"
});

Then pass the response into PointsChart props in your UI layer:

<PointsChart data={response} />

API Reference

Props

PropTypeDefaultDescription
dataPointsChartDataPoint[]RequiredTime-series points values
heightnumber260Chart container height in pixels
titlestring"Your points"Chart title text
headerRightReactNode-Optional right-side header content, such as a period selector
yAxisLabelstring-Optional Y-axis label text
levelsPointsChartLevel[]-Optional level thresholds with star markers and dashed lines

Types

interface PointsChartDataPoint {
  date: string
  total: number
  change: number
}

interface PointsChartLevel {
  value: number
  color: string
}
Raise an issue Contribute