Area Charts Showcase

A comprehensive set of interactive Area Chart components for the Saudi National Design System (NDS / DGA).

Installation

pnpm dlx shadcn@latest add https://nds.aboalrejal.com/r/chart.json

Interactive Preview & Code

Dynamic Props Usage

All chart components accept dynamic data and config props while maintaining default fallbacks:

import { ChartAreaDefault } from "@/registry/dga/charts/chart-area-default"

const customData = [
  { month: "Jan", visitors: 400 },
  { month: "Feb", visitors: 700 },
  { month: "Mar", visitors: 1200 },
]

const customConfig = {
  visitors: {
    label: "Regional Visitors",
    color: "var(--chart-1)",
  },
}

export default function AreaChartOverview() {
  return (
    <ChartAreaDefault
      data={customData}
      config={customConfig}
      title="Annual Visitors Report"
      description="Central Region Visitor Statistics 2024"
      trendingText="Trending up by 18.4% this month"
    />
  )
}