1import{j as e,r as f}from"./main-BkpAS6Tt.js";import{C as r}from"./card-DoRMGzGn.js";import{C as i}from"./CodeDialog-0FrlQqch.js";import{l as j,a6 as a,V as L,o as s,q as l,r as d,a7 as B,b as p,C as A,B as M,E as D}from"./chart-ob8-8xNE.js";import{X as n,Y as b,C as h}from"./YAxis-CWH5LL4r.js";import{B as K}from"./BreadcrumbComp-DdXArMCY.js";import"./_commonjsHelpers-CE1G-McA.js";import"./utils-4perknFd.js";import"./iconify-BLAYqHQO.js";import"./index-DBgj5RxF.js";import"./index-BMnuVYbS.js";/* empty css */import"./tooltip-Ca_sQpWi.js";import"./index-DRcYnjBa.js";import"./index-CfThMl9f.js";import"./index-L0SKbviM.js";import"./index-Jo9Y0u8a.js";import"./index-BHinUB-C.js";import"./index-DfANd6nE.js";import"./index-Ddz03csu.js";import"./floating-ui.dom-D7G01c1r.js";import"./index-B_H36sPx.js";import"./index-DjxFjNHx.js";import"./isPlainObject-DJZKX-6g.js";import"./index-C8UgGVIT.js";import"./CardBox-CY_4CfKs.js";var c=j({chartName:"BarChart",GraphicalChild:a,defaultTooltipEventType:"axis",validateTooltipEventTypes:["axis","item"],axisComponents:[{axisType:"xAxis",AxisComp:n},{axisType:"yAxis",AxisComp:b}],formatAxisMap:L});const S=[{browser:"chrome",visitors:187,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:275,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],C={visitors:{label:"Visitors"},chrome:{label:"Chrome"},safari:{label:"Safari"},firefox:{label:"Firefox"},edge:{label:"Edge"},other:{label:"Other"}};function N(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:C,children:e.jsxs(c,{accessibilityLayer:!0,data:S,barSize:30,children:[e.jsx(h,{vertical:!1}),e.jsx(n,{dataKey:"browser",tickLine:!1,tickMargin:10,axisLine:!1,tickFormatter:t=>C[t]?.label}),e.jsx(l,{cursor:!1,content:e.jsx(d,{hideLabel:!0})}),e.jsx(a,{dataKey:"visitors",strokeWidth:2,radius:8,activeIndex:2,activeBar:({...t})=>e.jsx(B,{...t,fillOpacity:.8,stroke:t.payload.fill,strokeDasharray:4,strokeDashoffset:4})})]})})})}const T=`import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from 'recharts'; 2 3import { 4 ChartConfig, 5 ChartContainer, 6 ChartTooltip, 7 ChartTooltipContent, 8} from 'src/components/ui/chart'; 9 10export const description = 'A bar chart with an active bar'; 11 12const chartData = [ 13 { browser: 'chrome', visitors: 187, fill: 'var(--color-primary)' }, 14 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 15 { browser: 'firefox', visitors: 275, fill: 'var(--color-warning)' }, 16 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 17 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 18]; 19 20const chartConfig = { 21 visitors: { 22 label: 'Visitors', 23 }, 24 chrome: { 25 label: 'Chrome', 26 }, 27 safari: { 28 label: 'Safari', 29 }, 30 firefox: { 31 label: 'Firefox', 32 }, 33 edge: { 34 label: 'Edge', 35 }, 36 other: { 37 label: 'Other', 38 }, 39} satisfies ChartConfig; 40 41export default function ChartBarActiveCode() { 42 return ( 43 <> 44 <ChartContainer config={chartConfig}> 45 <BarChart accessibilityLayer data={chartData} barSize={30}> 46 <CartesianGrid vertical={false} /> 47 <XAxis 48 dataKey="browser" 49 tickLine={false} 50 tickMargin={10} 51 axisLine={false} 52 tickFormatter={(value) => chartConfig[value as keyof typeof chartConfig]?.label} 53 /> 54 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 55 <Bar 56 dataKey="visitors" 57 strokeWidth={2} 58 radius={8} 59 activeIndex={2} 60 activeBar={({ ...props }) => { 61 return ( 62 <Rectangle 63 {...props} 64 fillOpacity={0.8} 65 stroke={props.payload.fill} 66 strokeDasharray={4} 67 strokeDashoffset={4} 68 /> 69 ); 70 }} 71 /> 72 </BarChart> 73 </ChartContainer> 74 </> 75 ); 76} 77`,F=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Active"}),e.jsx(N,{})]}),e.jsx(i,{children:T})]})}),w=[{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}],J={desktop:{label:"Desktop"},mobile:{label:"Mobile"},label:{color:"var(--background)"}};function z(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:J,children:e.jsxs(c,{accessibilityLayer:!0,data:w,barSize:30,layout:"vertical",margin:{right:16},children:[e.jsx(h,{horizontal:!1}),e.jsx(b,{dataKey:"month",type:"category",tickLine:!1,tickMargin:10,axisLine
77:!1,tickFormatter:t=>t.slice(0,3),hide:!0}),e.jsx(n,{dataKey:"desktop",type:"number",hide:!0}),e.jsx(l,{cursor:!1,content:e.jsx(d,{indicator:"line"})}),e.jsxs(a,{dataKey:"desktop",layout:"vertical",fill:"var(--color-primary)",radius:4,children:[e.jsx(p,{dataKey:"month",position:"insideLeft",offset:8,className:"fill-(--color-white)",fontSize:12}),e.jsx(p,{dataKey:"desktop",position:"right",offset:8,className:"fill-foreground",fontSize:12})]})]})})})}const G=`import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from 'recharts'; 78 79import { 80 ChartConfig, 81 ChartContainer, 82 ChartTooltip, 83 ChartTooltipContent, 84} from 'src/components/ui/chart'; 85 86export const description = 'A bar chart with a custom label'; 87 88const chartData = [ 89 { month: 'January', desktop: 186, mobile: 80 }, 90 { month: 'February', desktop: 305, mobile: 200 }, 91 { month: 'March', desktop: 237, mobile: 120 }, 92 { month: 'April', desktop: 73, mobile: 190 }, 93 { month: 'May', desktop: 209, mobile: 130 }, 94 { month: 'June', desktop: 214, mobile: 140 }, 95]; 96 97const chartConfig = { 98 desktop: { 99 label: 'Desktop', 100 }, 101 mobile: { 102 label: 'Mobile', 103 }, 104 label: { 105 color: 'var(--background)', 106 }, 107} satisfies ChartConfig; 108 109export default function ChartBarLabelCustomCode() { 110 return ( 111 <> 112 <ChartContainer config={chartConfig}> 113 <BarChart 114 accessibilityLayer 115 data={chartData} 116 barSize={30} 117 layout="vertical" 118 margin={{ 119 right: 16, 120 }} 121 > 122 <CartesianGrid horizontal={false} /> 123 <YAxis 124 dataKey="month" 125 type="category" 126 tickLine={false} 127 tickMargin={10} 128 axisLine={false} 129 tickFormatter={(value) => value.slice(0, 3)} 130 hide 131 /> 132 <XAxis dataKey="desktop" type="number" hide /> 133 <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} /> 134 <Bar dataKey="desktop" layout="vertical" fill="var(--color-primary)" radius={4}> 135 <LabelList 136 dataKey="month" 137 position="insideLeft" 138 offset={8} 139 className="fill-(--color-white)" 140 fontSize={12} 141 /> 142 <LabelList 143 dataKey="desktop" 144 position="right" 145 offset={8} 146 className="fill-foreground" 147 fontSize={12} 148 /> 149 </Bar> 150 </BarChart> 151 </ChartContainer> 152 </> 153 ); 154} 155`,X=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Custom Label"}),e.jsx(z,{})]}),e.jsx(i,{children:G})]})}),$=[{month:"January",desktop:186},{month:"February",desktop:305},{month:"March",desktop:237},{month:"April",desktop:73},{month:"May",desktop:209},{month:"June",desktop:214},{month:"July",desktop:186},{month:"August",desktop:305},{month:"september",desktop:237}],I={desktop:{label:"Desktop"}};function E(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:I,children:e.jsxs(c,{accessibilityLayer:!0,data:$,barSize:30,children:[e.jsx(h,{vertical:!1}),e.jsx(n,{dataKey:"month",tickLine:!1,tickMargin:10,axisLine:!1,tickFormatter:t=>t.slice(0,3)}),e.jsx(l,{cursor:!1,content:e.jsx(d,{hideLabel:!0})}),e.jsx(a,{dataKey:"desktop",fill:"var(--color-primary)",radius:8})]})})})}const V=`import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'; 156 157import { 158 ChartConfig, 159 ChartContainer, 160 ChartTooltip, 161 ChartTooltipContent, 162} from 'src/components/ui/chart'; 163 164export const description = 'A bar chart'; 165 166const chartData = [ 167 { month: 'January', desktop: 186 }, 168 { month: 'February', desktop: 305 }, 169 { month: 'March', desktop: 237 }, 170 { month: 'April', desktop: 73 }, 171 { month: 'May', desktop: 209 }, 172 { month: 'June', desktop: 214 }, 173 { month: 'July', desktop: 186 }, 174 { month: 'August', desktop: 305 }, 175 { month: 'september', desktop: 237 }, 176]; 177 178const chartConfig = { 179 desktop: { 180 label: 'Desktop', 181 }, 182} satisfies ChartConfig; 183 184export default function ChartBarDefaultCode() { 185 return ( 186 <> 187 <ChartContainer config={chartConfig}> 188 <BarChart accessibilityLayer data={chartData} barSize={30}> 189 <CartesianGrid vertical={false} /> 190 <XAxis 191 dataKey="month"
192 tickLine={false} 193 tickMargin={10} 194 axisLine={false} 195 tickFormatter={(value) => value.slice(0, 3)} 196 /> 197 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 198 <Bar dataKey="desktop" fill="var(--color-primary)" radius={8} /> 199 </BarChart> 200 </ChartContainer> 201 </> 202 ); 203} 204`,O=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Default"}),e.jsx(E,{})]}),e.jsx(i,{children:V})]})}),R=[{month:"January",desktop:186},{month:"February",desktop:305},{month:"March",desktop:237},{month:"April",desktop:73},{month:"May",desktop:209},{month:"June",desktop:214}],Y={desktop:{label:"Desktop"}};function H(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:Y,children:e.jsxs(c,{accessibilityLayer:!0,data:R,barSize:30,layout:"vertical",margin:{left:-20},children:[e.jsx(n,{type:"number",dataKey:"desktop",hide:!0}),e.jsx(b,{dataKey:"month",type:"category",tickLine:!1,tickMargin:10,axisLine:!1,tickFormatter:t=>t.slice(0,3)}),e.jsx(l,{cursor:!1,content:e.jsx(d,{hideLabel:!0})}),e.jsx(a,{dataKey:"desktop",fill:"var(--color-secondary)",radius:5})]})})})}const U=`import { Bar, BarChart, XAxis, YAxis } from 'recharts'; 205 206import { 207 ChartConfig, 208 ChartContainer, 209 ChartTooltip, 210 ChartTooltipContent, 211} from 'src/components/ui/chart'; 212 213export const description = 'A horizontal bar chart'; 214 215const chartData = [ 216 { month: 'January', desktop: 186 }, 217 { month: 'February', desktop: 305 }, 218 { month: 'March', desktop: 237 }, 219 { month: 'April', desktop: 73 }, 220 { month: 'May', desktop: 209 }, 221 { month: 'June', desktop: 214 }, 222]; 223 224const chartConfig = { 225 desktop: { 226 label: 'Desktop', 227 }, 228} satisfies ChartConfig; 229 230export default function ChartBarHorizontalCode() { 231 return ( 232 <> 233 <ChartContainer config={chartConfig}> 234 <BarChart 235 accessibilityLayer 236 data={chartData} 237 barSize={30} 238 layout="vertical" 239 margin={{ 240 left: -20, 241 }} 242 > 243 <XAxis type="number" dataKey="desktop" hide /> 244 <YAxis 245 dataKey="month" 246 type="category" 247 tickLine={false} 248 tickMargin={10} 249 axisLine={false} 250 tickFormatter={(value) => value.slice(0, 3)} 251 /> 252 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 253 <Bar dataKey="desktop" fill="var(--color-secondary)" radius={5} /> 254 </BarChart> 255 </ChartContainer> 256 </> 257 ); 258} 259`,P=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Horizontal"}),e.jsx(H,{})]}),e.jsx(i,{children:U})]})}),k=[{date:"2024-04-01",desktop:222,mobile:150},{date:"2024-04-02",desktop:97,mobile:180},{date:"2024-04-03",desktop:167,mobile:120},{date:"2024-04-04",desktop:242,mobile:260},{date:"2024-04-05",desktop:373,mobile:290},{date:"2024-04-06",desktop:301,mobile:340},{date:"2024-04-07",desktop:245,mobile:180},{date:"2024-04-08",desktop:409,mobile:320},{date:"2024-04-09",desktop:59,mobile:110},{date:"2024-04-10",desktop:261,mobile:190},{date:"2024-04-11",desktop:327,mobile:350},{date:"2024-04-12",desktop:292,mobile:210},{date:"2024-04-13",desktop:342,mobile:380},{date:"2024-04-14",desktop:137,mobile:220},{date:"2024-04-15",desktop:120,mobile:170},{date:"2024-04-16",desktop:138,mobile:190},{date:"2024-04-17",desktop:446,mobile:360},{date:"2024-04-18",desktop:364,mobile:410},{date:"2024-04-19",desktop:243,mobile:180},{date:"2024-04-20",desktop:89,mobile:150},{date:"2024-04-21",desktop:137,mobile:200},{date:"2024-04-22",desktop:224,mobile:170},{date:"2024-04-23",desktop:138,mobile:230},{date:"2024-04-24",desktop:387,mobile:290},{date:"2024-04-25",desktop:215,mobile:250},{date:"2024-04-26",desktop:75,mobile:130},{date:"2024-04-27",desktop:383,mobile:420},{date:"2024-04-28",desktop:122,mobile:180},{date:"2024-04-29",desktop:315,mobile:240},{date:"2024-04-30",desktop:454,mobile:380},{date:"2024-05-01",desktop:165,mobile:220},{date:"2024-05-02",desktop:293,mobile:310},{date:"2024-05-03",desktop:247,mobile:190},{date:"2024-05-04",desktop:385,mobile:420},{date:"2024-05-05",desktop:481,mobile:390},{date:"2024-05-06",desktop:498,mobile:520},{date:"2024-05-07",desktop:388,mobile:300},{date:"2024-05-08",desktop:149,mobile:210},{date:"2024-05-09",desktop:227,mobile:180},{date:"2024-05-10",desktop:293,mobile:330},{date:"2024-05-11",desktop:335,mobile:270},{date:"2024-05-12",desktop:197,mobile:240},{date:"2024-05-13",desktop:197,mobile:160},{date:"2024-05-14",desktop:448,mobile:490},{date:"2024-05-15",desktop:473,mobile:380},{date:"2024-05-16",desktop:338,mobile:400},{date:"2024-05-17",desktop:499,mobile:420},{date:"2024-05-18",desktop:315,mobile:350},{date:"2024-05-19",desktop:235,mobile:180},{date:"2024-05-20",desktop:177,mobile:230},{date:"2024-05-21",desktop:82,mobile:140},{date:"2024-05-22",desktop:81,mobile:120},{date:"2024-05-23",desktop:252,mobile:290},{date:"2024-05-24",desktop:294,mobile:220},{date:"2024-05-25",desktop:201,mobile:250},{date:"2024-05-26",desktop:213,mobile:170},{date:"2024-05-27",desktop:420,mobile:460},{date:"2024-05-28",desktop:233,mobile:190},{date:"2024-05-29",desktop:78,mobile:130},{date:"2024-05-30",desktop:340,mobile:280},{date:"2024-05-31",desktop:178,mobile:230},{date:"2024-06-01",desktop:178,mobile:200},{date:"2024-06-02",desktop:470,mobile:410},{date:"2024-06-03",desktop:103,mobile:160},{date:"2024-06-04",desktop:439,mobile:380},{date:"2024-06-05",desktop:88,mobile:140},{date:"2024-06-06",desktop:294,mobile:250},{date:"2024-06-07",desktop:323,mobile:370},{date:"2024-06-08",desktop:385,mobile:320},{date:"2024-06-09",desktop:438,mobile:480},{date:"2024-06-10",desktop:155,mobile:200},{date:"2024-06-11",desktop:92,mobile:150},{date:"2024-06-12",desktop:492,mobile:420},{date:"2024-06-13",desktop:81,mobile:130},{date:"2024-06-14",desktop:426,mobile:380},{date:"2024-06-15",desktop:307,mobile:350},{date:"2024-06-16",desktop:371,mobile:310},{date:"2024-06-17",desktop:475,mobile:520},{date:"2024-06-18",desktop:107,mobile:170},{date:"2024-06-19",desktop:341,mobile:290},{date:"2024-06-20",desktop:408,mobile:450},{date:"2024-06-21",desktop:169,mobile:210},{date:"2024-06-22",desktop:317,mobile:270},{date:"2024-06-23",desktop:480,mobile:530},{date:"2024-06-24",desktop:132,mobile:180}
259,{date:"2024-06-25",desktop:141,mobile:190},{date:"2024-06-26",desktop:434,mobile:380},{date:"2024-06-27",desktop:448,mobile:490},{date:"2024-06-28",desktop:149,mobile:200},{date:"2024-06-29",desktop:103,mobile:160},{date:"2024-06-30",desktop:446,mobile:400}],x={views:{label:"Page Views"},desktop:{label:"Desktop",color:"var(--color-primary)"},mobile:{label:"Mobile",color:"var(--color-secondary)"}};function W(){const[t,v]=f.useState("desktop"),g=f.useMemo(()=>({desktop:k.reduce((o,m)=>o+m.desktop,0),mobile:k.reduce((o,m)=>o+m.mobile,0)}),[]);return e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"flex border border-ld rounded-md",children:["desktop","mobile"].map(o=>{const m=o;return e.jsxs("button",{"data-active":t===m,className:"data-[active=true]:bg-lightprimary dark:data-[active=true]:bg-lightprimary relative flex flex-1 flex-col justify-center gap-1 px-6 py-4 text-left sm:px-8 sm:py-6",onClick:()=>v(m),children:[e.jsx("span",{className:"text-muted-foreground text-xs",children:x[m].label}),e.jsx("span",{className:"text-lg leading-none font-bold sm:text-3xl",children:g[o].toLocaleString()})]},m)})}),e.jsx(s,{config:x,children:e.jsxs(c,{accessibilityLayer:!0,data:k,margin:{left:12,right:12},children:[e.jsx(h,{vertical:!1}),e.jsx(n,{dataKey:"date",tickLine:!1,axisLine:!1,tickMargin:8,minTickGap:32,tickFormatter:o=>new Date(o).toLocaleDateString("en-US",{month:"short",day:"numeric"})}),e.jsx(l,{content:e.jsx(d,{className:"w-[150px]",nameKey:"views",labelFormatter:o=>new Date(o).toLocaleDateString("en-US",{month:"short",day:"numeric",year:"numeric"})})}),e.jsx(a,{dataKey:t,fill:`var(--color-${t})`})]})})]})}const q=`import * as React from 'react'; 260import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'; 261 262import { 263 ChartConfig, 264 ChartContainer, 265 ChartTooltip, 266 ChartTooltipContent, 267} from 'src/components/ui/chart'; 268 269export const description = 'An interactive bar chart'; 270 271const chartData = [ 272 { date: '2024-04-01', desktop: 222, mobile: 150 }, 273 { date: '2024-04-02', desktop: 97, mobile: 180 }, 274 { date: '2024-04-03', desktop: 167, mobile: 120 }, 275 { date: '2024-04-04', desktop: 242, mobile: 260 }, 276 { date: '2024-04-05', desktop: 373, mobile: 290 }, 277 { date: '2024-04-06', desktop: 301, mobile: 340 }, 278 { date: '2024-04-07', desktop: 245, mobile: 180 }, 279 { date: '2024-04-08', desktop: 409, mobile: 320 }, 280 { date: '2024-04-09', desktop: 59, mobile: 110 }, 281 { date: '2024-04-10', desktop: 261, mobile: 190 }, 282 { date: '2024-04-11', desktop: 327, mobile: 350 }, 283 { date: '2024-04-12', desktop: 292, mobile: 210 }, 284 { date: '2024-04-13', desktop: 342, mobile: 380 }, 285 { date: '2024-04-14', desktop: 137, mobile: 220 }, 286 { date: '2024-04-15', desktop: 120, mobile: 170 }, 287 { date: '2024-04-16', desktop: 138, mobile: 190 }, 288 { date: '2024-04-17', desktop: 446, mobile: 360 }, 289 { date: '2024-04-18', desktop: 364, mobile: 410 }, 290 { date: '2024-04-19', desktop: 243, mobile: 180 }, 291 { date: '2024-04-20', desktop: 89, mobile: 150 }, 292 { date: '2024-04-21', desktop: 137, mobile: 200 }, 293 { date: '2024-04-22', desktop: 224, mobile: 170 }, 294 { date: '2024-04-23', desktop: 138, mobile: 230 }, 295 { date: '2024-04-24', desktop: 387, mobile: 290 }, 296 { date: '2024-04-25', desktop: 215, mobile: 250 }, 297 { date: '2024-04-26', desktop: 75, mobile: 130 }, 298 { date: '2024-04-27', desktop: 383, mobile: 420 }, 299 { date: '2024-04-28', desktop: 122, mobile: 180 }, 300 { date: '2024-04-29', desktop: 315, mobile: 240 }, 301 { date: '2024-04-30', desktop: 454, mobile: 380 }, 302 { date: '2024-05-01', desktop: 165, mobile: 220 }, 303 { date: '2024-05-02', desktop: 293, mobile: 310 }, 304 { date: '2024-05-03', desktop: 247, mobile: 190 }, 305 { date: '2024-05-04', desktop: 385, mobile: 420 }, 306 { date: '2024-05-05', desktop: 481, mobile: 390 }, 307 { date: '2024-05-06', desktop: 498, mobile: 520 }, 308 { date: '2024-05-07', desktop: 388, mobile: 300 }, 309 { date: '2024-05-08', desktop: 149, mobile: 210 }, 310 { date: '2024-05-09', desktop: 227, mobile: 180 }, 311 { date: '2024-05-10', desktop: 293, mobile: 330 }, 312 { date: '2024-05-11', desktop: 335, mobile: 270 }, 313 { date: '2024-05-12', desktop: 197, mobile: 240 }, 314 { date: '2024-05-13', desktop: 197, mobile: 160 }, 315 { date: '2024-05-14', desktop: 448, mobile: 490 }, 316 { date: '2024-05-15', desktop: 473, mobile: 380 }, 317 { date: '2024-05-16', desktop: 338, mobile: 400 },
318 { date: '2024-05-17', desktop: 499, mobile: 420 }, 319 { date: '2024-05-18', desktop: 315, mobile: 350 }, 320 { date: '2024-05-19', desktop: 235, mobile: 180 }, 321 { date: '2024-05-20', desktop: 177, mobile: 230 }, 322 { date: '2024-05-21', desktop: 82, mobile: 140 }, 323 { date: '2024-05-22', desktop: 81, mobile: 120 }, 324 { date: '2024-05-23', desktop: 252, mobile: 290 }, 325 { date: '2024-05-24', desktop: 294, mobile: 220 }, 326 { date: '2024-05-25', desktop: 201, mobile: 250 }, 327 { date: '2024-05-26', desktop: 213, mobile: 170 }, 328 { date: '2024-05-27', desktop: 420, mobile: 460 }, 329 { date: '2024-05-28', desktop: 233, mobile: 190 }, 330 { date: '2024-05-29', desktop: 78, mobile: 130 }, 331 { date: '2024-05-30', desktop: 340, mobile: 280 }, 332 { date: '2024-05-31', desktop: 178, mobile: 230 }, 333 { date: '2024-06-01', desktop: 178, mobile: 200 }, 334 { date: '2024-06-02', desktop: 470, mobile: 410 }, 335 { date: '2024-06-03', desktop: 103, mobile: 160 }, 336 { date: '2024-06-04', desktop: 439, mobile: 380 }, 337 { date: '2024-06-05', desktop: 88, mobile: 140 }, 338 { date: '2024-06-06', desktop: 294, mobile: 250 }, 339 { date: '2024-06-07', desktop: 323, mobile: 370 }, 340 { date: '2024-06-08', desktop: 385, mobile: 320 }, 341 { date: '2024-06-09', desktop: 438, mobile: 480 }, 342 { date: '2024-06-10', desktop: 155, mobile: 200 }, 343 { date: '2024-06-11', desktop: 92, mobile: 150 }, 344 { date: '2024-06-12', desktop: 492, mobile: 420 }, 345 { date: '2024-06-13', desktop: 81, mobile: 130 }, 346 { date: '2024-06-14', desktop: 426, mobile: 380 }, 347 { date: '2024-06-15', desktop: 307, mobile: 350 }, 348 { date: '2024-06-16', desktop: 371, mobile: 310 }, 349 { date: '2024-06-17', desktop: 475, mobile: 520 }, 350 { date: '2024-06-18', desktop: 107, mobile: 170 }, 351 { date: '2024-06-19', desktop: 341, mobile: 290 }, 352 { date: '2024-06-20', desktop: 408, mobile: 450 }, 353 { date: '2024-06-21', desktop: 169, mobile: 210 }, 354 { date: '2024-06-22', desktop: 317, mobile: 270 }, 355 { date: '2024-06-23', desktop: 480, mobile: 530 }, 356 { date: '2024-06-24', desktop: 132, mobile: 180 }, 357 { date: '2024-06-25', desktop: 141, mobile: 190 }, 358 { date: '2024-06-26', desktop: 434, mobile: 380 }, 359 { date: '2024-06-27', desktop: 448, mobile: 490 }, 360 { date: '2024-06-28', desktop: 149, mobile: 200 }, 361 { date: '2024-06-29', desktop: 103, mobile: 160 }, 362 { date: '2024-06-30', desktop: 446, mobile: 400 }, 363]; 364 365const chartConfig = { 366 views: { 367 label: 'Page Views', 368 }, 369 desktop: { 370 label: 'Desktop', 371 color: 'var(--color-primary)', 372 }, 373 mobile: { 374 label: 'Mobile', 375 color: 'var(--color-secondary)', 376 }, 377} satisfies ChartConfig; 378 379export default function ChartBarInteractiveCode() { 380 const [activeChart, setActiveChart] = React.useState<keyof typeof chartConfig>('desktop'); 381 382 const total = React.useMemo( 383 () => ({ 384 desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0), 385 mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0), 386 }), 387 [], 388 ); 389 390 return ( 391 <> 392 {/* */} 393 <div className="flex border border-ld rounded-md"> 394 {['desktop', 'mobile'].map((key) => { 395 const chart = key as keyof typeof chartConfig; 396 return ( 397 <button 398 key={chart} 399 data-active={activeChart === chart} 400 className="data-[active=true]:bg-lightprimary dark:data-[active=true]:bg-lightprimary relative flex flex-1 flex-col justify-center gap-1 px-6 py-4 text-left sm:px-8 sm:py-6" 401 onClick={() => setActiveChart(chart)} 402 > 403 <span className="text-muted-foreground text-xs">{chartConfig[chart].label}</span> 404 <span className="text-lg leading-none font-bold sm:text-3xl"> 405 {total[key as keyof typeof total].toLocaleString()} 406 </span> 407 </button> 408 ); 409 })} 410 </div> 411 {/* */} 412 <ChartContainer config={chartConfig}> 413 <BarChart 414 accessibilityLayer 415 data={chartData} 416 margin={{ 417 left: 12, 418 right: 12, 419 }} 420 > 421 <CartesianGrid vertical={false} /> 422 <XAxis 423 dataKey="date"
424 tickLine={false} 425 axisLine={false} 426 tickMargin={8} 427 minTickGap={32} 428 tickFormatter={(value) => { 429 const date = new Date(value); 430 return date.toLocaleDateString('en-US', { 431 month: 'short', 432 day: 'numeric', 433 }); 434 }} 435 /> 436 <ChartTooltip 437 content={ 438 <ChartTooltipContent 439 className="w-[150px]" 440 nameKey="views" 441 labelFormatter={(value) => { 442 return new Date(value).toLocaleDateString('en-US', { 443 month: 'short', 444 day: 'numeric', 445 year: 'numeric', 446 }); 447 }} 448 /> 449 } 450 /> 451 <Bar dataKey={activeChart} fill={\`var(--color-\${activeChart})\`} /> 452 </BarChart> 453 </ChartContainer> 454 </> 455 ); 456} 457`,Q=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Interactive"}),e.jsx(W,{})]}),e.jsx(i,{children:q})]})}),Z=[{month:"January",desktop:186},{month:"February",desktop:305},{month:"March",desktop:237},{month:"April",desktop:73},{month:"May",desktop:209},{month:"June",desktop:214},{month:"July",desktop:190},{month:"August",desktop:260},{month:"September",desktop:178}],_={desktop:{label:"Desktop"}};function ee(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:_,children:e.jsxs(c,{accessibilityLayer:!0,data:Z,barSize:30,margin:{top:20},children:[e.jsx(h,{vertical:!1}),e.jsx(n,{dataKey:"month",tickLine:!1,tickMargin:10,axisLine:!1,tickFormatter:t=>t.slice(0,3)}),e.jsx(l,{cursor:!1,content:e.jsx(d,{hideLabel:!0})}),e.jsx(a,{dataKey:"desktop",fill:"var(--color-secondary)",radius:8,children:e.jsx(p,{position:"top",offset:12,className:"fill-foreground",fontSize:12})})]})})})}const te=`import { Bar, BarChart, CartesianGrid, LabelList, XAxis } from 'recharts'; 458 459import { 460 ChartConfig, 461 ChartContainer, 462 ChartTooltip, 463 ChartTooltipContent, 464} from 'src/components/ui/chart'; 465 466export const description = 'A bar chart with a label'; 467 468const chartData = [ 469 { month: 'January', desktop: 186 }, 470 { month: 'February', desktop: 305 }, 471 { month: 'March', desktop: 237 }, 472 { month: 'April', desktop: 73 }, 473 { month: 'May', desktop: 209 }, 474 { month: 'June', desktop: 214 }, 475 { month: 'July', desktop: 190 }, 476 { month: 'August', desktop: 260 }, 477 { month: 'September', desktop: 178 }, 478]; 479 480const chartConfig = { 481 desktop: { 482 label: 'Desktop', 483 }, 484} satisfies ChartConfig; 485 486export default function ChartBarLabelCode() { 487 return ( 488 <> 489 <ChartContainer config={chartConfig}> 490 <BarChart 491 accessibilityLayer 492 data={chartData} 493 barSize={30} 494 margin={{ 495 top: 20, 496 }} 497 > 498 <CartesianGrid vertical={false} /> 499 <XAxis 500 dataKey="month" 501 tickLine={false} 502 tickMargin={10} 503 axisLine={false} 504 tickFormatter={(value) => value.slice(0, 3)} 505 /> 506 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 507 <Bar dataKey="desktop" fill="var(--color-secondary)" radius={8}> 508 <LabelList position="top" offset={12} className="fill-foreground" fontSize={12} /> 509 </Bar> 510 </BarChart> 511 </ChartContainer> 512 </> 513 ); 514} 515`,ae=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Label"}),e.jsx(ee,{})]}),e.jsx(i,{children:te})]})}),oe=[{browser:"chrome",visitors:275,fill:"var(--color-primary)"},{browser:"safari",visitors:200,fill:"var(--color-secondary)"},{browser:"firefox",visitors:187,fill:"var(--color-warning)"},{browser:"edge",visitors:173,fill:"var(--color-error)"},{browser:"other",visitors:90,fill:"var(--color-info)"}],u={visitors:{label:"Visitors"},chrome:{label:"Chrome"},safari:{label:"Safari"},firefox:{label:"Firefox"},edge:{label:"Edge"},other:{label:"Other"}};function re(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:u,children:e.jsxs(c,{accessibilityLayer:!0,data:oe,barSize:30,layout:"vertical",margin:{left:0},children:[e.jsx(b,{dataKey:"browser",type:"category",tickLine:!1,tickMargin:10,axisLine
515:!1,tickFormatter:t=>u[t]?.label}),e.jsx(n,{dataKey:"visitors",type:"number",hide:!0}),e.jsx(l,{cursor:!1,content:e.jsx(d,{hideLabel:!0})}),e.jsx(a,{dataKey:"visitors",layout:"vertical",radius:5})]})})})}const ie=`import { Bar, BarChart, XAxis, YAxis } from 'recharts'; 516 517import { 518 ChartConfig, 519 ChartContainer, 520 ChartTooltip, 521 ChartTooltipContent, 522} from 'src/components/ui/chart'; 523 524export const description = 'A mixed bar chart'; 525 526const chartData = [ 527 { browser: 'chrome', visitors: 275, fill: 'var(--color-primary)' }, 528 { browser: 'safari', visitors: 200, fill: 'var(--color-secondary)' }, 529 { browser: 'firefox', visitors: 187, fill: 'var(--color-warning)' }, 530 { browser: 'edge', visitors: 173, fill: 'var(--color-error)' }, 531 { browser: 'other', visitors: 90, fill: 'var(--color-info)' }, 532]; 533 534const chartConfig = { 535 visitors: { 536 label: 'Visitors', 537 }, 538 chrome: { 539 label: 'Chrome', 540 }, 541 safari: { 542 label: 'Safari', 543 }, 544 firefox: { 545 label: 'Firefox', 546 }, 547 edge: { 548 label: 'Edge', 549 }, 550 other: { 551 label: 'Other', 552 }, 553} satisfies ChartConfig; 554 555export default function ChartBarMixedCode() { 556 return ( 557 <> 558 <ChartContainer config={chartConfig}> 559 <BarChart 560 accessibilityLayer 561 data={chartData} 562 barSize={30} 563 layout="vertical" 564 margin={{ 565 left: 0, 566 }} 567 > 568 <YAxis 569 dataKey="browser" 570 type="category" 571 tickLine={false} 572 tickMargin={10} 573 axisLine={false} 574 tickFormatter={(value) => chartConfig[value as keyof typeof chartConfig]?.label} 575 /> 576 <XAxis dataKey="visitors" type="number" hide /> 577 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} /> 578 <Bar dataKey="visitors" layout="vertical" radius={5} /> 579 </BarChart> 580 </ChartContainer> 581 </> 582 ); 583} 584`,se=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Mixed"}),e.jsx(re,{})]}),e.jsx(i,{children:ie})]})}),le=[{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},{month:"July",desktop:198,mobile:150},{month:"August",desktop:225,mobile:160},{month:"September",desktop:245,mobile:170}],de={desktop:{label:"Desktop"},mobile:{label:"Mobile"}};function ne(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:de,children:e.jsxs(c,{accessibilityLayer:!0,data:le,barSize:30,children:[e.jsx(h,{vertical:!1}),e.jsx(n,{dataKey:"month",tickLine:!1,tickMargin:10,axisLine:!1,tickFormatter:t=>t.slice(0,3)}),e.jsx(l,{cursor:!1,content:e.jsx(d,{indicator:"dashed"})}),e.jsx(a,{dataKey:"desktop",fill:"var(--color-primary)",radius:4}),e.jsx(a,{dataKey:"mobile",fill:"var(--color-secondary)",radius:4})]})})})}const ce=`import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'; 585 586import { 587 ChartConfig, 588 ChartContainer, 589 ChartTooltip, 590 ChartTooltipContent, 591} from 'src/components/ui/chart'; 592 593export const description = 'A multiple bar chart'; 594 595const chartData = [ 596 { month: 'January', desktop: 186, mobile: 80 }, 597 { month: 'February', desktop: 305, mobile: 200 }, 598 { month: 'March', desktop: 237, mobile: 120 }, 599 { month: 'April', desktop: 73, mobile: 190 }, 600 { month: 'May', desktop: 209, mobile: 130 }, 601 { month: 'June', desktop: 214, mobile: 140 }, 602 { month: 'July', desktop: 198, mobile: 150 }, 603 { month: 'August', desktop: 225, mobile: 160 }, 604 { month: 'September', desktop: 245, mobile: 170 }, 605]; 606 607const chartConfig = { 608 desktop: { 609 label: 'Desktop', 610 }, 611 mobile: { 612 label: 'Mobile', 613 }, 614} satisfies ChartConfig; 615 616export default function ChartBarMultipleCode() { 617 return ( 618 <> 619 <ChartContainer config={chartConfig}> 620 <BarChart accessibilityLayer data={chartData} barSize={30}> 621 <CartesianGrid vertical={false} /> 622 <XAxis 623 dataKey="month"
624 tickLine={false} 625 tickMargin={10} 626 axisLine={false} 627 tickFormatter={(value) => value.slice(0, 3)} 628 /> 629 <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />} /> 630 <Bar dataKey="desktop" fill="var(--color-primary)" radius={4} /> 631 <Bar dataKey="mobile" fill="var(--color-secondary)" radius={4} /> 632 </BarChart> 633 </ChartContainer> 634 </> 635 ); 636} 637`,me=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Multiple"}),e.jsx(ne,{})]}),e.jsx(i,{children:ce})]})}),y=[{month:"January",visitors:186},{month:"February",visitors:205},{month:"March",visitors:-207},{month:"April",visitors:173},{month:"May",visitors:-209},{month:"June",visitors:214},{month:"July",visitors:-180},{month:"August",visitors:230},{month:"September",visitors:-160}],he={visitors:{label:"Visitors"}};function pe(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:he,children:e.jsxs(c,{accessibilityLayer:!0,data:y,barSize:30,children:[e.jsx(h,{vertical:!1}),e.jsx(l,{cursor:!1,content:e.jsx(d,{hideLabel:!0,hideIndicator:!0})}),e.jsxs(a,{dataKey:"visitors",children:[e.jsx(p,{position:"top",dataKey:"month",fillOpacity:1}),y.map(t=>e.jsx(A,{fill:t.visitors>0?"var(--color-primary)":"var(--color-secondary)"},t.month))]})]})})})}const be=`import { Bar, BarChart, CartesianGrid, Cell, LabelList } from 'recharts'; 638 639import { 640 ChartConfig, 641 ChartContainer, 642 ChartTooltip, 643 ChartTooltipContent, 644} from 'src/components/ui/chart'; 645 646export const description = 'A bar chart with negative values'; 647 648const chartData = [ 649 { month: 'January', visitors: 186 }, 650 { month: 'February', visitors: 205 }, 651 { month: 'March', visitors: -207 }, 652 { month: 'April', visitors: 173 }, 653 { month: 'May', visitors: -209 }, 654 { month: 'June', visitors: 214 }, 655 { month: 'July', visitors: -180 }, 656 { month: 'August', visitors: 230 }, 657 { month: 'September', visitors: -160 }, 658]; 659 660const chartConfig = { 661 visitors: { 662 label: 'Visitors', 663 }, 664} satisfies ChartConfig; 665 666export default function ChartBarNegativeCode() { 667 return ( 668 <> 669 <ChartContainer config={chartConfig}> 670 <BarChart accessibilityLayer data={chartData} barSize={30}> 671 <CartesianGrid vertical={false} /> 672 <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel hideIndicator />} /> 673 <Bar dataKey="visitors"> 674 <LabelList position="top" dataKey="month" fillOpacity={1} /> 675 {chartData.map((item) => ( 676 <Cell 677 key={item.month} 678 fill={item.visitors > 0 ? 'var(--color-primary)' : 'var(--color-secondary)'} 679 /> 680 ))} 681 </Bar> 682 </BarChart> 683 </ChartContainer> 684 </> 685 ); 686} 687`,ke=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Negative"}),e.jsx(pe,{})]}),e.jsx(i,{children:be})]})}),fe=[{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},{month:"July",desktop:190,mobile:175},{month:"August",desktop:250,mobile:145},{month:"September",desktop:198,mobile:160}],Ce={desktop:{label:"Desktop"},mobile:{label:"Mobile"}};function xe(){return e.jsx(e.Fragment,{children:e.jsx(s,{config:Ce,children:e.jsxs(c,{accessibilityLayer:!0,data:fe,barSize:30,children:[e.jsx(h,{vertical:!1}),e.jsx(n,{dataKey:"month",tickLine:!1,tickMargin:10,axisLine:!1,tickFormatter:t=>t.slice(0,3)}),e.jsx(l,{content:e.jsx(d,{hideLabel:!0})}),e.jsx(M,{content:e.jsx(D,{})}),e.jsx(a,{dataKey:"desktop",stackId:"a",fill:"var(--color-primary)",radius:[0,0,4,4]}),e.jsx(a,{dataKey:"mobile",stackId:"a",fill:"var(--color-secondary)",radius:[4,4,0,0]})]})})})}const ue=`import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'; 688 689import { 690 ChartConfig, 691 ChartContainer, 692 ChartLegend, 693 ChartLegendContent, 694 ChartTooltip, 695 ChartTooltipContent, 696} from 'src/components/ui/chart'; 697 698export const description = 'A stacked bar chart with a legend'; 699 700const chartData = [ 701 { month: 'January', desktop: 186, mobile: 80 }, 702 { month: 'February', desktop: 305, mobile: 200 }, 703 { month: 'March', desktop: 237, mobile: 120 }, 704 { month: 'April', desktop: 73, mobile: 190 }, 705 { month: 'May', desktop: 209, mobile: 130 }, 706 { month: 'June', desktop: 214, mobile: 140 }, 707 { month: 'July', desktop: 190, mobile: 175 }, 708 { month: 'August', desktop: 250, mobile: 145 },
709 { month: 'September', desktop: 198, mobile: 160 }, 710]; 711 712const chartConfig = { 713 desktop: { 714 label: 'Desktop', 715 }, 716 mobile: { 717 label: 'Mobile', 718 }, 719} satisfies ChartConfig; 720 721export default function ChartBarStackedCode() { 722 return ( 723 <> 724 <ChartContainer config={chartConfig}> 725 <BarChart accessibilityLayer data={chartData} barSize={30}> 726 <CartesianGrid vertical={false} /> 727 <XAxis 728 dataKey="month" 729 tickLine={false} 730 tickMargin={10} 731 axisLine={false} 732 tickFormatter={(value) => value.slice(0, 3)} 733 /> 734 <ChartTooltip content={<ChartTooltipContent hideLabel />} /> 735 <ChartLegend content={<ChartLegendContent />} /> 736 <Bar dataKey="desktop" stackId="a" fill="var(--color-primary)" radius={[0, 0, 4, 4]} /> 737 <Bar dataKey="mobile" stackId="a" fill="var(--color-secondary)" radius={[4, 4, 0, 0]} /> 738 </BarChart> 739 </ChartContainer> 740 </> 741 ); 742} 743`,ye=()=>e.jsx(r,{className:"p-0",children:e.jsxs("div",{children:[e.jsxs("div",{className:"p-6",children:[e.jsx("h4",{className:"text-lg font-semibold mb-4",children:"Stacked + Legend"}),e.jsx(xe,{})]}),e.jsx(i,{children:ue})]})}),ve=[{to:"/",title:"Home"},{to:"",title:"Shadcn Bar Chart"}];function Pe(){return e.jsxs(e.Fragment,{children:[e.jsx(K,{title:"Shadcn Bar Chart",items:ve}),e.jsxs("div",{className:"flex flex-col gap-6",children:[e.jsx("div",{children:e.jsx(O,{})}),e.jsx("div",{children:e.jsx(P,{})}),e.jsx("div",{children:e.jsx(me,{})}),e.jsx("div",{children:e.jsx(ye,{})}),e.jsx("div",{children:e.jsx(ae,{})}),e.jsx("div",{children:e.jsx(X,{})}),e.jsx("div",{children:e.jsx(se,{})}),e.jsx("div",{children:e.jsx(F,{})}),e.jsx("div",{children:e.jsx(ke,{})}),e.jsx("div",{children:e.jsx(Q,{})})]})]})}export{Pe as component};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.