📊 Building `downloads-graph`: An NPM Package for Download Stats

Published on June 11, 2025

I recently published a reusable React component called downloads-graph, available on NPM. It visualizes daily download counts for any NPM package using Chart.js and React ChartJS 2.

✨ Features

📦 Fetches real-time data from the NPM downloads API
📈 Interactive, responsive line chart
🎨 Fully customizable via props
⚡ Optimized for React apps (Vite, CRA, Next.js)

🚀 Installation

npm install downloads-graph

Also install the required peer dependencies:

npm install react react-dom chart.js react-chartjs-2

🛠 Usage

import DownloadsGraph from "downloads-graph";

export default function App() {
  return (
    <div style={{ height: 400 }}>
      <DownloadsGraph
        packageName="react"
        borderColor="blue"
        backgroundColor="rgba(0, 0, 255, 0.2)"
      />
    </div>
  );
}

📦 Props

Prop	Type	Required	Description
`packageName`	string	✅	NPM package to visualize downloads for
`borderColor`	string	❌	Color of the chart line
`backgroundColor`	string	❌	Area fill under the chart line

🙋‍♂️ Author