Pro Components

Base Components

Charts Group 5

Year-over-year comparison with a dual-line chart and summary card showing totals and growth percentage.

Example

Year over Year Comparison
Revenue performance vs last year
Summary
Period comparison
This Year$152,400
Last Year$129,200
Difference+$23,200
Growth+18.0%
Avg/Month (This)$25,400
Avg/Month (Last)$21,533

Introduction

Charts Group 5 is a period-over-period comparison layout:
  • Dual-line chart: Current year (solid) vs previous year (dashed), two-thirds width.
  • Summary card: Totals for both periods and calculated growth percentage (e.g. +8.2%).
  • Layout: Stacks on mobile with chart on top.
Totals and growth are derived from the chart data. Uses Chart, Card, and Recharts.

Usage

import { ChartGroup5 } from "@/components/ui/chart-group-5";

<ChartGroup5 />;
Replace the sample data array with your current and previous period series; the summary card updates from the same data.

On this page