Bar Charts Showcase

A comprehensive set of interactive Bar 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 { ChartBarInteractive } from "@/registry/dga/charts/chart-bar-interactive"

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

const customConfig = {
  value: {
    label: "Metrics",
    color: "var(--chart-1)",
  },
}

export default function BarChartOverview() {
  return (
    <ChartBarInteractive
      data={customData}
      config={customConfig}
      title="Annual Analytics Report"
      description="Regional Statistics 2024"
      trendingText="Trending up by 12.5% this period"
    />
  )
}