technology
Jenzy

Jenzy

web - developer

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)

Related Posts

Disable CROS in Google Chrome

Disable cross origin in Google Chrome
technology

Disable Cross origin in Google Chrome for web development.

EJ2 editor for Text rich editor.

placeholder for testing imagme
technology

EJ2 (Essential JS 2) Editor from Syncfusion. The EJ2 Editor is part...

Elon Musk Will Alter Global Evilution

Elon Musk thumbnail
technology

Elon musk suprise the world by his released things in 2024

More Posts