Charts

Chart components for data visualization using recharts

Line Chart

Population Growth (1990-2025)

"use client";
import LineChart from "@/components/ui/charts/line-chart";
import styles from "./line-chart-demo.module.css";

const data = [
  { date: 1990, value: 27.7, type: "CANADA" },
  { date: 1991, value: 28.0, type: "CANADA" },
  { date: 1992, value: 28.4, type: "CANADA" },
  { date: 1993, value: 28.7, type: "CANADA" },
  { date: 1994, value: 29.0, type: "CANADA" },
  { date: 1995, value: 29.3, type: "CANADA" },
  { date: 1996, value: 29.6, type: "CANADA" },
  { date: 1997, value: 29.9, type: "CANADA" },
  { date: 1998, value: 30.2, type: "CANADA" },
  { date: 1999, value: 30.4, type: "CANADA" },
  { date: 2000, value: 30.7, type: "CANADA" },
  { date: 2001, value: 31.0, type: "CANADA" },
  { date: 2002, value: 31.4, type: "CANADA" },
  { date: 2003, value: 31.6, type: "CANADA" },
  { date: 2004, value: 31.9, type: "CANADA" },
  { date: 2005, value: 32.2, type: "CANADA" },
  { date: 2006, value: 32.6, type: "CANADA" },
  { date: 2007, value: 32.9, type: "CANADA" },
  { date: 2008, value: 33.2, type: "CANADA" },
  { date: 2009, value: 33.6, type: "CANADA" },
  { date: 2010, value: 34.0, type: "CANADA" },
  { date: 2011, value: 34.3, type: "CANADA" },
  { date: 2012, value: 34.7, type: "CANADA" },
  { date: 2013, value: 35.1, type: "CANADA" },
  { date: 2014, value: 35.4, type: "CANADA" },
  { date: 2015, value: 35.7, type: "CANADA" },
  { date: 2016, value: 36.1, type: "CANADA" },
  { date: 2017, value: 36.5, type: "CANADA" },
  { date: 2018, value: 37.0, type: "CANADA" },
  { date: 2019, value: 37.6, type: "CANADA" },
  { date: 2020, value: 38.0, type: "CANADA" },
  { date: 2021, value: 38.2, type: "CANADA" },
  { date: 2022, value: 38.9, type: "CANADA" },
  { date: 2023, value: 39.6, type: "CANADA" },
  { date: 2024, value: 40.0, type: "CANADA" },
  { date: 2025, value: 40.1, type: "CANADA" },

  { date: 1990, value: 57.2, type: "UK" },
  { date: 1991, value: 57.4, type: "UK" },
  { date: 1992, value: 57.6, type: "UK" },
  { date: 1993, value: 57.7, type: "UK" },
  { date: 1994, value: 57.9, type: "UK" },
  { date: 1995, value: 58.0, type: "UK" },
  { date: 1996, value: 58.2, type: "UK" },
  { date: 1997, value: 58.3, type: "UK" },
  { date: 1998, value: 58.5, type: "UK" },
  { date: 1999, value: 58.7, type: "UK" },
  { date: 2000, value: 59.0, type: "UK" },
  { date: 2001, value: 59.1, type: "UK" },
  { date: 2002, value: 59.3, type: "UK" },
  { date: 2003, value: 59.6, type: "UK" },
  { date: 2004, value: 60.0, type: "UK" },
  { date: 2005, value: 60.4, type: "UK" },
  { date: 2006, value: 60.8, type: "UK" },
  { date: 2007, value: 61.3, type: "UK" },
  { date: 2008, value: 61.8, type: "UK" },
  { date: 2009, value: 62.3, type: "UK" },
  { date: 2010, value: 62.8, type: "UK" },
  { date: 2011, value: 63.3, type: "UK" },
  { date: 2012, value: 63.7, type: "UK" },
  { date: 2013, value: 64.1, type: "UK" },
  { date: 2014, value: 64.6, type: "UK" },
  { date: 2015, value: 65.1, type: "UK" },
  { date: 2016, value: 65.6, type: "UK" },
  { date: 2017, value: 66.0, type: "UK" },
  { date: 2018, value: 66.4, type: "UK" },
  { date: 2019, value: 66.8, type: "UK" },
  { date: 2020, value: 67.9, type: "UK" },
  { date: 2021, value: 67.0, type: "UK" },
  { date: 2022, value: 67.5, type: "UK" },
  { date: 2023, value: 68.3, type: "UK" },
  { date: 2024, value: 69.0, type: "UK" },
  { date: 2025, value: 69.8, type: "UK" },
];

export default function LineChartDemo() {
  return (
    <div className={styles.container}>
      <h3 className={styles.title}>Population Growth (1990-2025)</h3>
      <div className={styles.chartContainer}>
        <LineChart
          data={data}
          showXAxis={true}
          showYAxis={true}
          showXGrid={false}
          showPoints={false}
          animated
        />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/line-chart.json

Props

PropTypeDefault
data
LineChartData[]-
showXAxis
booleantrue
showYAxis
booleantrue
showXGrid
booleantrue
showYGrid
booleantrue
curve
"linear" | "monotoneX" | "cardinal" | "basis" | "step""linear"
showPoints
booleanfalse
pointSize
number4
xAxisFormatter
(value: any) => string-
animated
booleanfalse

Radial Bar Chart

Department Budget Allocation

"use client";

import RadialBarChart from "@/components/ui/charts/radial-bar-chart";
import styles from "./radial-bar-chart-demo.module.css";

const data = [
  { category: "Marketing", value: 2800 },
  { category: "Sales", value: 3200 },
  { category: "Engineering", value: 4100 },
  { category: "Support", value: 1900 },
  { category: "Operations", value: 2400 },
  { category: "Finance", value: 1600 },
  { category: "HR", value: 1200 },
];

export default function RadialBarChartDemo() {
  return (
    <div className={styles.container}>
      <h3 className={styles.title}>Department Budget Allocation</h3>
      <div className={styles.chartWrapper}>
        <RadialBarChart
          data={data}
          showLabels={true}
          animated
        />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/radial-bar-chart.json

Props

PropTypeDefault
data
RadialBarChartData[]-
innerRadius
number | string10%
outerRadius
number | string80%
showLabels
booleantrue
animated
booleanfalse

Area Chart

Revenue Growth (2020-2030)

"use client";

import AreaChart from "@/components/ui/charts/area-chart";
import styles from "./area-chart-demo.module.css";

const data = [
  { year: 2020, amount: 45.2, type: "REVENUE" },
  { year: 2021, amount: 52.8, type: "REVENUE" },
  { year: 2022, amount: 48.9, type: "REVENUE" },
  { year: 2023, amount: 67.3, type: "REVENUE" },
  { year: 2024, amount: 72.1, type: "REVENUE" },
  { year: 2025, amount: 89.4, type: "REVENUE" },
  { year: 2026, amount: 95.7, type: "REVENUE" },
  { year: 2027, amount: 103.2, type: "REVENUE" },
  { year: 2028, amount: 118.6, type: "REVENUE" },
  { year: 2029, amount: 127.9, type: "REVENUE" },
  { year: 2030, amount: 142.3, type: "REVENUE" },
];

export default function AreaChartDemo() {
  return (
    <div className={styles.container}>
      <h3 className={styles.title}>Revenue Growth (2020-2030)</h3>
      <div className={styles.chartContainer}>
        <AreaChart
          data={data}
          showXAxis={true}
          showYAxis={true}
          showXGrid={false}
          showYGrid={true}
          showPoints={false}
          fillOpacity={0.2}
          animated
        />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/area-chart.json

Props

PropTypeDefault
data
AreaChartData[]-
showXAxis
booleantrue
showYAxis
booleantrue
showXGrid
booleantrue
showYGrid
booleantrue
curve
"linear" | "monotoneX" | "cardinal" | "basis" | "step""linear"
showPoints
booleanfalse
pointSize
number4
xAxisFormatter
(value: any) => string-
fillOpacity
number0.3
animated
booleanfalse

Bar Chart

Monthly Sales Performance

"use client";

import BarChart from "@/components/ui/charts/bar-chart";
import styles from "./bar-chart-demo.module.css";

const data = [
  { category: "Jan", amount: 45.2, type: "SALES" },
  { category: "Feb", amount: 52.8, type: "SALES" },
  { category: "Mar", amount: 48.9, type: "SALES" },
  { category: "Apr", amount: 67.3, type: "SALES" },
  { category: "May", amount: 72.1, type: "SALES" },
  { category: "Jun", amount: 89.4, type: "SALES" },
  { category: "Jul", amount: 95.7, type: "SALES" },
  { category: "Aug", amount: 103.2, type: "SALES" },
];

export default function BarChartDemo() {
  return (
    <div className={styles.container}>
      <h3 className={styles.title}>Monthly Sales Performance</h3>
      <div className={styles.chartContainer}>
        <BarChart
          data={data}
          showXAxis={true}
          showYAxis={true}
          showXGrid={false}
          showYGrid={true}
          useGradient={false}
          animated
        />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/bar-chart.json

Props

PropTypeDefault
data
BarChartData[]-
showXAxis
booleantrue
showYAxis
booleantrue
showXGrid
booleanfalse
showYGrid
booleantrue
xAxisFormatter
(value: string) => string-
useGradient
booleantrue
animated
booleanfalse

Pie Chart

Traffic by Platform

"use client";

import PieChart from "@/components/ui/charts/pie-chart";
import styles from "./pie-chart-demo.module.css";

const data = [
  { category: "Mobile", value: 45.2, type: "PLATFORM" },
  { category: "Desktop", value: 32.8, type: "PLATFORM" },
  { category: "Tablet", value: 15.9, type: "PLATFORM" },
  { category: "Smart TV", value: 6.1, type: "PLATFORM" },
];

export default function PieChartDemo() {
  const blueShades = ["#1e40af", "#3b82f6", "#60a5fa", "#93c5fd"];

  return (
    <div className={styles.container}>
      <h3 className={styles.title}>Traffic by Platform</h3>
      <div className={styles.chartWrapper}>
        <PieChart data={data} colors={blueShades} />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/pie-chart.json

Props

PropTypeDefault
data
PieChartData[]-
innerRadius
number0
outerRadius
number-
showLabels
booleantrue
animated
booleanfalse

Radar Chart

System Quality Metrics

"use client";

import RadarChart from "@/components/ui/charts/radar-chart";
import styles from "./radar-chart-demo.module.css";

const data = [
  { category: "Performance", value: 85, type: "METRIC" },
  { category: "Security", value: 92, type: "METRIC" },
  { category: "Usability", value: 78, type: "METRIC" },
  { category: "Reliability", value: 88, type: "METRIC" },
  { category: "Scalability", value: 75, type: "METRIC" },
  { category: "Maintainability", value: 82, type: "METRIC" },
];

export default function RadarChartDemo() {
  return (
    <div className={styles.container}>
      <h3 className={styles.title}>System Quality Metrics</h3>
      <div style={{ height: "400px", width: "100%" }}>
        <RadarChart
          data={data}
          levels={5}
          maxValue={100}
          showLabels={true}
          showGrid={true}
          showRadialAxis={false}
          fillOpacity={0.3}
          animated
        />
      </div>
    </div>
  );
}

Installation

npx shadcn@latest add https://roiui.com/r/radar-chart.json

Props

PropTypeDefault
data
RadarChartData[]-
levels
number5
maxValue
number-
showLabels
booleantrue
showGrid
booleantrue
showRadialAxis
booleantrue
fillOpacity
number0.3
animated
booleanfalse