Charts - Rechart

Reference to https://ui.shadcn.com/docs/components/chart that used rechart with Shadcn style.

The chart library in Shadcn used Rechart under development style.

Rechart: https://recharts.org/en-US/

Example of using a line chart:

 <LineChart width={500} height={300} data={data}>
    <XAxis dataKey="name"/>
    <YAxis/>
    <CartesianGrid stroke="#eee" strokeDasharray="5 5"/>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <Line type="monotone" dataKey="pv" stroke="#82ca9d" />
  </LineChart>

How to connect with Next.js:

Shadcn advises installing library recharts@alpha to support the most recent version of Next.js 15, according to the new release.

Step 1: Install Shadcn library

npx shadcn@latest add chart

Step 2: Config with style base that recommended from Shadcn

@layer base {
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

Start with your first chart:

• Define chart dataset as JSON

  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 },
  ]
  

• Config chart

  import { type ChartConfig } from "@/components/ui/chart"
  
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb",
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa",
    },
  } satisfies ChartConfig
  

• Import Chart container, and tools that you want to use in the component:

  "use client"
  
  import { Bar, BarChart } from "recharts"
  
  import { ChartConfig, ChartContainer } from "@/components/ui/chart"
  
  const chartData = [
    { month: "January", desktop: 186, mobile: 80 },
    { month: "February", desktop: 305, mobile: 200 },
    { month: "March", desktop: 237, mobile: 120 },
    { month: "April", desktop: 73, mobile: 190 },
    { month: "May", desktop: 209, mobile: 130 },
    { month: "June", desktop: 214, mobile: 140 },
  ]
  
  const chartConfig = {
    desktop: {
      label: "Desktop",
      color: "#2563eb",
    },
    mobile: {
      label: "Mobile",
      color: "#60a5fa",
    },
  } satisfies ChartConfig
  
  export function Component() {
    return (
      <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
        <BarChart accessibilityLayer data={chartData}>
          <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
          <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
        </BarChart>
      </ChartContainer>
    )
  }
  

You must correctly define the minimum width and height based on your requirements in order for the chart to be responsive.

More chart: https://ui.shadcn.com/charts

Map chart

We base on research to https://www.react-simple-maps.io/docs/geography/ (react-simple-map)