Revenue Trends Chart

Features

• Monthly profit and loss comparison across different time periods.
• Clear bar visualization highlighting revenue trends.
• Easy identification of growth and decline in financial performance.
• Compact dashboard-friendly layout suitable for analytics interfaces.

Installation

Prerequisites

This component assumes shadcn/ui is installed in your project since it relies on the ThemeProvider powered by next-themes.

If you haven't installed shadcn yet:

npx shadcn@latest init

npx shadcn@latest add https://charts.zenin.design/r/revenue-trends.json

Data Structure

// Example dataset used to render the revenue trends chart.
// Each object contains the month along with profit and loss values.

const apiData = [
  { month: "Jan", profit: 14000, loss: 22000 },
  { month: "Feb", profit: 23000, loss: 17000 },
  { month: "Mar", profit: 19000, loss: 14000 },
  { month: "Apr", profit: 18000, loss: 20000 },
  { month: "May", profit: 26000, loss: 17000 },
  { month: "Jun", profit: 20000, loss: 27000 },
  { month: "Jul", profit: 19000, loss: 21000 },
  { month: "Aug", profit: 17000, loss: 14000 },
];

Props

This component does not require any props by default. The chart uses an internal dataset to demonstrate the momentum visualization.

If needed, you can extend the component by adding your own props such as custom data, colors, or formatting logic.

Usage

<RevenueTrends />