📊 Downloads-Graph

A lightweight, reusable React component to visualize daily NPM download statistics for any package — built with Chart.js and React ChartJS 2.

🔍 Description

downloads-graph lets you display a beautiful line chart showing the last 30 days of download activity for any NPM package. Perfect for documentation, portfolio dashboards, project analytics, or developer tools.

👁️ Preview

• 📦 Fetches real-time data from the NPM downloads API
• 📈 Interactive and responsive chart using Chart.js
• 🎨 Fully customizable chart styles via props
• ⚡ Works in React environments
• 📤 Easy to embed in your documentation or stats page

🚀 Installation

npm install downloads-graph
# or
yarn add downloads-graph

Make sure you also have 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 | ✅ Yes | The name of the npm package to fetch download stats for | | borderColor | string | ❌ No | Color of the line border (e.g., "blue" or "#3498db") | | backgroundColor | string | ❌ No | Fill color under the chart line |

🧠 Example

<DownloadsGraph
  packageName="vite"
  borderColor="green"
  backgroundColor="rgba(0,255,0,0.1)"
/>

✅ Compatibility

• React 18+
• Vite or CRA supported

🏷 Keywords

react, chart, chartjs, downloads, npm, analytics, stats, graph, npm-stats, chart-component, react-chart, react-chartjs, npm-downloads

📄 License

MIT

🙋‍♂️ Author

Developed by Tarun Sai Srinivas
🔗 LinkedIn
📦 npmjs.com/package/downloads-graph