Activity Chart

Preview

Usage

import ActivityChart from '@/components/charts/ActivityChart'

const myData = [
  { day: "Sun", examPassed: 10, lessonTaken: 20 },
  { day: "Mon", examPassed: 30, lessonTaken: 15 },
  // ...
]

export default function MyPage() {
  return (
    <div className="">
      <ActivityChart 
        data={myData} 
        firstName="Exams" 
        secondName="Lessons" 
      />
    </div>
  )
}

API

Prop	Type	Description
data	ChartData[]	Optional: Array of data objects containing day(string), examPassed(number), and lessonTaken(number).
firstName	string	Optional: Label for the first data series (default: 'Exam Passed').
secondName	string	Optional: Label for the second data series (default: 'Lesson Taken').

Customization

The component responds to data changes with smooth height transitions using framer-motion.