[{"data":1,"prerenderedAt":1206},["ShallowReactive",2],{"navigation":3,"$fMW9jOOkNpZriWVK3P_bZYNOyYR2IEPvrHsC7cDBlJJc":405,"/docs/components/chart":418,"surround-/docs/components/chart":1203},[4],{"title":5,"path":6,"stem":7,"children":8,"page":17},"Docs","/docs","docs",[9,90,353,360,366,379],{"path":6,"stem":7,"title":10,"type":11,"children":12},"Get Started","group",[13,19,44,48,52,70,74,78,82,86],{"title":14,"path":15,"stem":16,"new":17,"type":18,"children":-1},"Introduction","/docs/introduction","docs/01.introduction",false,"page",{"title":20,"path":21,"stem":22,"children":23,"new":17,"type":11},"Installation","/docs/installation","docs/02.installation",[24,28,32,36,40],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},"Vite","/docs/installation/vite","docs/installation/01.vite",{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},"Nuxt","/docs/installation/nuxt","docs/installation/02.nuxt",{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},"Astro","/docs/installation/astro","docs/installation/03.astro",{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},"Laravel","/docs/installation/laravel","docs/installation/04.laravel",{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},"Manual Installation","/docs/installation/manual","docs/installation/05.manual",{"title":45,"path":46,"stem":47,"new":17,"type":18,"children":-1},"components.json","/docs/components-json","docs/03.components-json",{"title":49,"path":50,"stem":51,"new":17,"type":18,"children":-1},"Theming","/docs/theming","docs/04.theming",{"title":53,"path":54,"stem":55,"children":56,"new":17,"type":11},"Dark Mode","/docs/dark-mode","docs/05.dark-mode",[57,60,63,67],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},"/docs/dark-mode/vite","docs/dark-mode/01.vite",{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},"/docs/dark-mode/nuxt","docs/dark-mode/02.nuxt",{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},"Vitepress","/docs/dark-mode/vitepress","docs/dark-mode/03.vitepress",{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},"/docs/dark-mode/astro","docs/dark-mode/04.astro",{"title":71,"path":72,"stem":73,"new":17,"type":18,"children":-1},"CLI","/docs/cli","docs/06.cli",{"title":75,"path":76,"stem":77,"new":17,"type":18,"children":-1},"JavaScript","/docs/javascript","docs/07.javascript",{"title":79,"path":80,"stem":81,"new":17,"type":18,"children":-1},"Figma","/docs/figma","docs/09.figma",{"title":83,"path":84,"stem":85,"new":17,"type":18,"children":-1},"Changelog","/docs/changelog","docs/10.changelog",{"title":87,"path":88,"stem":89,"new":17,"type":18,"children":-1},"Legacy Docs","/docs/legacy","docs/11.legacy",{"title":91,"path":92,"stem":93,"children":94,"new":17,"type":11},"Components","/docs/components","docs/02.components",[95,100,104,108,112,116,120,124,128,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,193,197,201,205,209,213,217,221,225,229,233,237,241,245,249,253,257,261,265,269,273,277,281,285,289,293,297,301,305,309,313,317,321,325,329,333,337,341,345,349],{"title":96,"path":97,"stem":98,"new":17,"type":99,"children":-1},"Accordion","/docs/components/accordion","docs/components/accordion","component",{"title":101,"path":102,"stem":103,"new":17,"type":99,"children":-1},"Alert","/docs/components/alert","docs/components/alert",{"title":105,"path":106,"stem":107,"new":17,"type":99,"children":-1},"Alert Dialog","/docs/components/alert-dialog","docs/components/alert-dialog",{"title":109,"path":110,"stem":111,"new":17,"type":99,"children":-1},"Aspect Ratio","/docs/components/aspect-ratio","docs/components/aspect-ratio",{"title":113,"path":114,"stem":115,"new":17,"type":99,"children":-1},"Avatar","/docs/components/avatar","docs/components/avatar",{"title":117,"path":118,"stem":119,"new":17,"type":99,"children":-1},"Badge","/docs/components/badge","docs/components/badge",{"title":121,"path":122,"stem":123,"new":17,"type":99,"children":-1},"Breadcrumb","/docs/components/breadcrumb","docs/components/breadcrumb",{"title":125,"path":126,"stem":127,"new":17,"type":99,"children":-1},"Button","/docs/components/button","docs/components/button",{"title":129,"path":130,"stem":131,"new":132,"type":99,"children":-1},"Button Group","/docs/components/button-group","docs/components/button-group",true,{"title":134,"path":135,"stem":136,"new":17,"type":99,"children":-1},"Calendar","/docs/components/calendar","docs/components/calendar",{"title":138,"path":139,"stem":140,"new":17,"type":99,"children":-1},"Card","/docs/components/card","docs/components/card",{"title":142,"path":143,"stem":144,"new":17,"type":99,"children":-1},"Carousel","/docs/components/carousel","docs/components/carousel",{"title":146,"path":147,"stem":148,"new":17,"type":99,"children":-1},"Chart","/docs/components/chart","docs/components/chart",{"title":150,"path":151,"stem":152,"new":17,"type":99,"children":-1},"Checkbox","/docs/components/checkbox","docs/components/checkbox",{"title":154,"path":155,"stem":156,"new":17,"type":99,"children":-1},"Collapsible","/docs/components/collapsible","docs/components/collapsible",{"title":158,"path":159,"stem":160,"new":17,"type":99,"children":-1},"Combobox","/docs/components/combobox","docs/components/combobox",{"title":162,"path":163,"stem":164,"new":17,"type":99,"children":-1},"Command","/docs/components/command","docs/components/command",{"title":166,"path":167,"stem":168,"new":17,"type":99,"children":-1},"Context Menu","/docs/components/context-menu","docs/components/context-menu",{"title":170,"path":171,"stem":172,"new":17,"type":99,"children":-1},"Data Table","/docs/components/data-table","docs/components/data-table",{"title":174,"path":175,"stem":176,"new":17,"type":99,"children":-1},"Date Picker","/docs/components/date-picker","docs/components/date-picker",{"title":178,"path":179,"stem":180,"new":17,"type":99,"children":-1},"Dialog","/docs/components/dialog","docs/components/dialog",{"title":182,"path":183,"stem":184,"new":17,"type":99,"children":-1},"Drawer","/docs/components/drawer","docs/components/drawer",{"title":186,"path":187,"stem":188,"new":17,"type":99,"children":-1},"Dropdown Menu","/docs/components/dropdown-menu","docs/components/dropdown-menu",{"title":190,"path":191,"stem":192,"new":132,"type":99,"children":-1},"Empty","/docs/components/empty","docs/components/empty",{"title":194,"path":195,"stem":196,"new":132,"type":99,"children":-1},"Field","/docs/components/field","docs/components/field",{"title":198,"path":199,"stem":200,"new":17,"type":99,"children":-1},"Form","/docs/components/form","docs/components/form",{"title":202,"path":203,"stem":204,"new":17,"type":99,"children":-1},"Hover Card","/docs/components/hover-card","docs/components/hover-card",{"title":206,"path":207,"stem":208,"new":17,"type":99,"children":-1},"Input","/docs/components/input","docs/components/input",{"title":210,"path":211,"stem":212,"new":132,"type":99,"children":-1},"Input Group","/docs/components/input-group","docs/components/input-group",{"title":214,"path":215,"stem":216,"new":17,"type":99,"children":-1},"Input OTP","/docs/components/input-otp","docs/components/input-otp",{"title":218,"path":219,"stem":220,"new":132,"type":99,"children":-1},"Item","/docs/components/item","docs/components/item",{"title":222,"path":223,"stem":224,"new":132,"type":99,"children":-1},"Kbd","/docs/components/kbd","docs/components/kbd",{"title":226,"path":227,"stem":228,"new":17,"type":99,"children":-1},"Label","/docs/components/label","docs/components/label",{"title":230,"path":231,"stem":232,"new":17,"type":99,"children":-1},"Menubar","/docs/components/menubar","docs/components/menubar",{"title":234,"path":235,"stem":236,"new":132,"type":99,"children":-1},"Native Select","/docs/components/native-select","docs/components/native-select",{"title":238,"path":239,"stem":240,"new":17,"type":99,"children":-1},"Navigation Menu","/docs/components/navigation-menu","docs/components/navigation-menu",{"title":242,"path":243,"stem":244,"new":17,"type":99,"children":-1},"Number Field","/docs/components/number-field","docs/components/number-field",{"title":246,"path":247,"stem":248,"new":17,"type":99,"children":-1},"Pagination","/docs/components/pagination","docs/components/pagination",{"title":250,"path":251,"stem":252,"new":17,"type":99,"children":-1},"Pin Input","/docs/components/pin-input","docs/components/pin-input",{"title":254,"path":255,"stem":256,"new":17,"type":99,"children":-1},"Popover","/docs/components/popover","docs/components/popover",{"title":258,"path":259,"stem":260,"new":17,"type":99,"children":-1},"Progress","/docs/components/progress","docs/components/progress",{"title":262,"path":263,"stem":264,"new":17,"type":99,"children":-1},"Radio Group","/docs/components/radio-group","docs/components/radio-group",{"title":266,"path":267,"stem":268,"new":17,"type":99,"children":-1},"Range Calendar","/docs/components/range-calendar","docs/components/range-calendar",{"title":270,"path":271,"stem":272,"new":17,"type":99,"children":-1},"Resizable","/docs/components/resizable","docs/components/resizable",{"title":274,"path":275,"stem":276,"new":17,"type":99,"children":-1},"Scroll Area","/docs/components/scroll-area","docs/components/scroll-area",{"title":278,"path":279,"stem":280,"new":17,"type":99,"children":-1},"Select","/docs/components/select","docs/components/select",{"title":282,"path":283,"stem":284,"new":17,"type":99,"children":-1},"Separator","/docs/components/separator","docs/components/separator",{"title":286,"path":287,"stem":288,"new":17,"type":99,"children":-1},"Sheet","/docs/components/sheet","docs/components/sheet",{"title":290,"path":291,"stem":292,"new":17,"type":99,"children":-1},"Sidebar","/docs/components/sidebar","docs/components/sidebar",{"title":294,"path":295,"stem":296,"new":17,"type":99,"children":-1},"Skeleton","/docs/components/skeleton","docs/components/skeleton",{"title":298,"path":299,"stem":300,"new":17,"type":99,"children":-1},"Slider","/docs/components/slider","docs/components/slider",{"title":302,"path":303,"stem":304,"new":17,"type":99,"children":-1},"Sonner","/docs/components/sonner","docs/components/sonner",{"title":306,"path":307,"stem":308,"new":132,"type":99,"children":-1},"Spinner","/docs/components/spinner","docs/components/spinner",{"title":310,"path":311,"stem":312,"new":17,"type":99,"children":-1},"Stepper","/docs/components/stepper","docs/components/stepper",{"title":314,"path":315,"stem":316,"new":17,"type":99,"children":-1},"Switch","/docs/components/switch","docs/components/switch",{"title":318,"path":319,"stem":320,"new":17,"type":99,"children":-1},"Table","/docs/components/table","docs/components/table",{"title":322,"path":323,"stem":324,"new":17,"type":99,"children":-1},"Tabs","/docs/components/tabs","docs/components/tabs",{"title":326,"path":327,"stem":328,"new":17,"type":99,"children":-1},"Tags Input","/docs/components/tags-input","docs/components/tags-input",{"title":330,"path":331,"stem":332,"new":17,"type":99,"children":-1},"Textarea","/docs/components/textarea","docs/components/textarea",{"title":334,"path":335,"stem":336,"new":17,"type":99,"children":-1},"Toast","/docs/components/toast","docs/components/toast",{"title":338,"path":339,"stem":340,"new":17,"type":99,"children":-1},"Toggle","/docs/components/toggle","docs/components/toggle",{"title":342,"path":343,"stem":344,"new":17,"type":99,"children":-1},"Toggle Group","/docs/components/toggle-group","docs/components/toggle-group",{"title":346,"path":347,"stem":348,"new":17,"type":99,"children":-1},"Tooltip","/docs/components/tooltip","docs/components/tooltip",{"title":350,"path":351,"stem":352,"new":17,"type":99,"children":-1},"Typography","/docs/components/typography","docs/components/typography",{"title":20,"path":21,"stem":22,"children":354,"new":17,"type":11},[355,356,357,358,359],{"title":25,"path":26,"stem":27,"new":17,"type":18,"children":-1},{"title":29,"path":30,"stem":31,"new":17,"type":18,"children":-1},{"title":33,"path":34,"stem":35,"new":17,"type":18,"children":-1},{"title":37,"path":38,"stem":39,"new":17,"type":18,"children":-1},{"title":41,"path":42,"stem":43,"new":17,"type":18,"children":-1},{"title":53,"path":54,"stem":55,"children":361,"new":17,"type":11},[362,363,364,365],{"title":25,"path":58,"stem":59,"new":17,"type":18,"children":-1},{"title":29,"path":61,"stem":62,"new":17,"type":18,"children":-1},{"title":64,"path":65,"stem":66,"new":17,"type":18,"children":-1},{"title":33,"path":68,"stem":69,"new":17,"type":18,"children":-1},{"title":367,"path":368,"stem":369,"children":370,"new":17,"type":11},"Forms","/docs/forms","docs/forms",[371,375],{"title":372,"path":373,"stem":374,"new":17,"type":18,"children":-1},"VeeValidate","/docs/forms/vee-validate","docs/forms/01.vee-validate",{"title":376,"path":377,"stem":378,"new":17,"type":18,"children":-1},"TanStack Form","/docs/forms/tanstack-form","docs/forms/02.tanstack-form",{"title":380,"path":381,"stem":382,"children":383,"new":17,"type":11},"Registry","/docs/registry","docs/registry/index",[384,385,389,393,397,401],{"title":380,"path":381,"stem":382,"new":17,"type":18,"children":-1},{"title":386,"path":387,"stem":388,"new":17,"type":18,"children":-1},"Examples","/docs/registry/examples","docs/registry/examples",{"title":390,"path":391,"stem":392,"new":17,"type":18,"children":-1},"FAQ","/docs/registry/faq","docs/registry/faq",{"title":394,"path":395,"stem":396,"new":17,"type":18,"children":-1},"Getting Started","/docs/registry/getting-started","docs/registry/getting-started",{"title":398,"path":399,"stem":400,"new":17,"type":18,"children":-1},"registry-item.json","/docs/registry/registry-item-json","docs/registry/registry-item-json",{"title":402,"path":403,"stem":404,"new":17,"type":18,"children":-1},"registry.json","/docs/registry/registry-json","docs/registry/registry-json",{"repo":406},{"id":407,"name":408,"repo":409,"description":410,"createdAt":411,"updatedAt":412,"pushedAt":413,"stars":414,"watchers":415,"forks":416,"defaultBranch":417},658791894,"shadcn-vue","unovue/shadcn-vue","Vue port of shadcn-ui","2023-06-26T13:53:23Z","2026-04-06T17:33:41Z","2026-04-06T17:33:39Z",9706,37,634,"dev",{"id":419,"title":146,"body":420,"description":1196,"extension":1197,"links":1198,"meta":1199,"navigation":132,"new":17,"path":147,"rawbody":1200,"seo":1201,"stem":148,"__hash__":1202},"content/docs/components/chart.md",{"type":421,"value":422,"toc":1169},"minimark",[423,436,445,448,456,460,470,485,496,499,504,507,582,586,592,596,599,649,654,661,695,699,711,746,750,761,793,796,817,821,824,827,830,836,839,842,846,875,879,882,888,892,898,902,908,912,918,921,924,939,949,957,963,969,973,976,1068,1072,1075,1079,1087,1093,1099,1113,1116,1123,1128,1134,1137,1139,1142,1147,1156,1162],[424,425],"component-preview",{"className":426,"name":434,":hideCode":435},[427,428,429,430,431,432,433],"theme-blue","[&_.preview]:h-auto","[&_.preview]:p-0","[&_.preview]:lg:min-h-[404px]","[&_.preview>div]:w-full","[&_.preview>div]:border-none","[&_.preview>div]:shadow-none","ChartBarInteractive","true",[437,438,439,440,444],"p",{},"Introducing ",[441,442,443],"strong",{},"Charts",". A collection of chart components that you can copy and paste into your apps.",[437,446,447],{},"Charts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project.",[437,449,450,455],{},[451,452,454],"a",{"href":453},"/charts","Browse the Charts Library",".",[457,458,459],"h2",{"id":99},"Component",[437,461,462,463,469],{},"We use ",[451,464,468],{"href":465,"rel":466},"https://unovis.dev/",[467],"nofollow","Unovis"," under the hood.",[437,471,472,473,477,478,455],{},"We designed the ",[474,475,476],"code",{},"chart"," component with composition in mind. ",[441,479,480,481,484],{},"You build your charts using Unovis components and only bring in custom components, such as ",[474,482,483],{},"ChartTooltip",", when and where you need it",[486,487,493],"pre",{"className":488,"code":490,"language":491,"meta":492},[489],"language-vue","\u003Cscript setup lang=\"ts\">\nimport { VisGroupedBar, VisXYContainer } from '@unovis/vue'\nimport { ChartContainer, ChartTooltipContent } from '@/components/ui/chart'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CChartContainer :config=\"chartConfig\">\n    \u003CVisXYContainer :data=\"data\">\n      \u003CVisGroupedBar :x=\"(d) => d.month\" :y=\"(d) => d.value\" />\n      \u003CChartTooltip :template=\"componentToString(chartConfig, ChartTooltipContent)\" />\n    \u003C/VisXYContainer>\n  \u003C/ChartContainer>\n\u003C/template>\n","vue","showLineNumbers",[474,494,490],{"__ignoreMap":495},"",[437,497,498],{},"We do not wrap Unovis. This means you're not locked into an abstraction. When a new Unovis version is released, you can follow the official upgrade path to upgrade your charts.",[437,500,501,455],{},[441,502,503],{},"The components are yours",[457,505,20],{"id":506},"installation",[508,509,510,525,536],"code-tabs",{},[511,512,513,519],"tabs-list",{},[514,515,517],"tabs-trigger",{"value":516},"cli",[437,518,71],{},[514,520,522],{"value":521},"manual",[437,523,524],{},"Manual",[526,527,528],"tabs-content",{"value":516},[486,529,534],{"className":530,"code":532,"language":533,"meta":495},[531],"language-bash","npx shadcn-vue@latest add chart\n","bash",[474,535,532],{"__ignoreMap":495},[526,537,538],{"value":521},[539,540,541,547,553,564,569,574],"steps",{},[542,543,544],"step",{},[437,545,546],{},"Install the following dependencies",[486,548,551],{"className":549,"code":550,"language":533,"meta":495},[531],"npm install @unovis/ts @unovis/vue\n",[474,552,550],{"__ignoreMap":495},[542,554,555],{},[437,556,557,558,563],{},"Copy and paste the ",[451,559,562],{"href":560,"rel":561},"https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/chart",[467],"GitHub source code"," into your project",[542,565,566],{},[437,567,568],{},"Update the import paths to match your project setup",[542,570,571],{},[437,572,573],{},"Add the following colors to your CSS file",[486,575,580],{"className":576,"code":578,"language":579,"meta":495},[577],"language-css","@layer base {\n  :root {\n    --chart-1: oklch(0.646 0.222 41.116);\n    --chart-2: oklch(0.6 0.118 184.704);\n    --chart-3: oklch(0.398 0.07 227.392);\n    --chart-4: oklch(0.828 0.189 84.429);\n    --chart-5: oklch(0.769 0.188 70.08);\n  }\n\n  .dark {\n    --chart-1: oklch(0.488 0.243 264.376);\n    --chart-2: oklch(0.696 0.17 162.48);\n    --chart-3: oklch(0.769 0.188 70.08);\n    --chart-4: oklch(0.627 0.265 303.9);\n    --chart-5: oklch(0.645 0.246 16.439);\n  }\n}\n","css",[474,581,578],{"__ignoreMap":495},[457,583,585],{"id":584},"usage","Usage",[486,587,590],{"className":588,"code":589,"language":491,"meta":492},[489],"\u003Cscript setup lang=\"ts\">\nimport type { ChartConfig } from '@/components/ui/chart'\nimport { VisGroupedBar, VisXYContainer } from '@unovis/vue'\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltip,\n  ChartTooltipContent,\n  componentToString,\n} from '@/components/ui/chart'\n\nconst chartData = [\n  { date: new Date(\"2024-01-01\"), desktop: 186, mobile: 80 },\n  { date: new Date(\"2024-02-01\"), desktop: 305, mobile: 200 },\n  { date: new Date(\"2024-03-01\"), desktop: 237, mobile: 120 },\n];\ntype Data = (typeof chartData)[number]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\u003C/script>\n\u003Ctemplate>\n  \u003CChartContainer :config=\"chartConfig\" class=\"min-h-[400px] w-full\">\n    \u003CVisXYContainer :data=\"chartData\">\n      \u003CVisGroupedBar\n        :x=\"(d: Data) => d.date\"\n        :y=\"[(d: Data) => d.desktop, (d: Data) => d.mobile]\"\n        :color=\"[chartConfig.desktop.color, chartConfig.mobile.color]\"\n      />\n      \u003CChartTooltip />\n      \u003CChartCrosshair\n        :template=\"\n          componentToString(chartConfig, ChartTooltipContent, {\n            labelFormatter(d) {\n              return new Date(d).toLocaleDateString('en-US', {\n                month: 'long',\n              });\n            },\n          })\n        \"\n        :color=\"[chartConfig.desktop.color, chartConfig.mobile.color]\"\n      />\n    \u003C/VisXYContainer>\n  \u003C/ChartContainer>\n\u003C/template>\n",[474,591,589],{"__ignoreMap":495},[457,593,595],{"id":594},"your-first-chart","Your First Chart",[437,597,598],{},"Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.",[539,600,601,606,609,617,622,625,631,636,639,644],{},[542,602,603],{},[437,604,605],{},"Start by defining your data",[437,607,608],{},"The following data represents the number of desktop and mobile users for each month.",[486,610,615],{"className":611,"code":613,"language":614,"meta":492},[612],"language-ts","const chartData = [\n  { month: 'January', desktop: 186, mobile: 80 },\n  { month: 'February', desktop: 305, mobile: 200 },\n  { month: 'March', desktop: 237, mobile: 120 },\n  { month: 'April', desktop: 73, mobile: 190 },\n  { month: 'May', desktop: 209, mobile: 130 },\n  { month: 'June', desktop: 214, mobile: 140 },\n]\n","ts",[474,616,613],{"__ignoreMap":495},[542,618,619],{},[437,620,621],{},"Define your chart config",[437,623,624],{},"The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.",[486,626,629],{"className":627,"code":628,"language":614,"meta":492},[612],"import type { ChartConfig } from '@/components/ui/chart'\n\nconst chartConfig = {\n  desktop: {\n    label: 'Desktop',\n    color: 'var(--chart-1)',\n  },\n  mobile: {\n    label: 'Mobile',\n    color: 'var(--chart-2)',\n  },\n} satisfies ChartConfig\n",[474,630,628],{"__ignoreMap":495},[542,632,633],{},[437,634,635],{},"Build your chart",[437,637,638],{},"You can now build your chart using Unovis components.",[640,641],"component-source",{"name":642,"title":643},"ChartBarDemo","components/ExampleChart.vue",[424,645],{"className":646,"name":642},[647,648],"[&_.preview]:min-h-[250px]","[&_.preview]:p-4",[650,651,653],"h3",{"id":652},"add-an-axis","Add an Axis",[437,655,656,657,660],{},"To add axes to the chart, we use the ",[474,658,659],{},"VisAxis"," component.",[539,662,663,671,677,685,691],{},[542,664,665],{},[437,666,667,668,670],{},"Import the ",[474,669,659],{}," component",[486,672,675],{"className":673,"code":674,"language":491,"meta":492},[489],"import { VisAxis, VisGroupedBar, VisXYContainer } from '@unovis/vue'\n",[474,676,674],{"__ignoreMap":495},[542,678,679],{},[437,680,681,682,684],{},"Add the ",[474,683,659],{}," components to your chart",[486,686,689],{"className":687,"code":688,"language":491,"meta":492},[489],"\u003Ctemplate>\n  \u003CVisAxis\n    type=\"x\"\n    :x=\"(d: Data) => d.date\"\n    :tick-line=\"false\"\n    :domain-line=\"false\"\n    :grid-line=\"false\"\n    :tick-format=\"(d: number) => {\n      const date = new Date(d)\n      return date.toLocaleDateString('en-US', {\n        month: 'short',\n      })\n    }\"\n    :tick-values=\"chartData.map(d => d.date)\"\n  />\n  \u003CVisAxis\n    type=\"y\"\n    :tick-format=\"(d: number) => ''\"\n    :tick-line=\"false\"\n    :domain-line=\"false\"\n    :grid-line=\"true\"\n  />\n\u003C/template>\n",[474,690,688],{"__ignoreMap":495},[424,692],{"className":693,"name":694},[647,648],"ChartBarDemoAxis",[650,696,698],{"id":697},"add-tooltip","Add Tooltip",[437,700,701,702,704,705,708,709,455],{},"To add a tooltip, we'll use the custom ",[474,703,483],{}," and ",[474,706,707],{},"ChartTooltipContent"," components from ",[474,710,476],{},[539,712,713,722,728,733,739,743],{},[542,714,715],{},[437,716,667,717,704,719,721],{},[474,718,483],{},[474,720,707],{}," components",[486,723,726],{"className":724,"code":725,"language":614,"meta":495},[612],"import { ChartTooltip, ChartTooltipContent, componentToString } from '@/components/ui/chart'\n",[474,727,725],{"__ignoreMap":495},[542,729,730],{},[437,731,732],{},"Add the components to your chart",[486,734,737],{"className":735,"code":736,"language":491,"meta":492},[489],"\u003CChartTooltip />\n\n\u003CChartCrosshair :template=\"componentToString(chartConfig, ChartTooltipContent)\" />\n",[474,738,736],{"__ignoreMap":495},[424,740],{"className":741,"name":742},[647,648],"ChartBarDemoTooltip",[437,744,745],{},"Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.",[650,747,749],{"id":748},"add-legend","Add Legend",[437,751,752,753,704,756,708,759,455],{},"We'll do the same for the legend. We'll use the ",[474,754,755],{},"ChartLegend",[474,757,758],{},"ChartLegendContent",[474,760,476],{},[539,762,763,770,776,781,789],{},[542,764,765],{},[437,766,667,767,769],{},[474,768,758],{}," components.",[486,771,774],{"className":772,"code":773,"language":614,"meta":495},[612],"import { ChartLegendContent } from '@/components/ui/chart'\n",[474,775,773],{"__ignoreMap":495},[542,777,778],{},[437,779,780],{},"Add the components to your chart.",[486,782,787],{"className":783,"code":784,"highlights":785,"language":491,"meta":492},[489],"\u003Ctemplate>\n  \u003CChartContainer :config=\"chartConfig\" class=\"min-h-[200px] w-full\">\n    \u003CVisXYContainer :data=\"chartData\" />\n    \u003CChartLegendContent />\n  \u003C/ChartContainer>\n\u003C/template>\n",[786],4,[474,788,784],{"__ignoreMap":495},[424,790],{"className":791,"name":792},[647,648],"ChartBarDemoLegend",[437,794,795],{},"Done. You've built your first chart! What's next?",[797,798,799,806,811],"ul",{},[800,801,802],"li",{},[451,803,805],{"href":804},"/docs/components/chart#theming","Themes and Colors",[800,807,808],{},[451,809,346],{"href":810},"/docs/components/chart#tooltip",[800,812,813],{},[451,814,816],{"href":815},"/docs/components/chart#legend","Legend",[457,818,820],{"id":819},"chart-config","Chart Config",[437,822,823],{},"The chart config is where you define the labels, icons and colors for a chart.",[437,825,826],{},"It is intentionally decoupled from chart data.",[437,828,829],{},"This allows you to share config and color tokens between charts. It can also works independently for cases where your data or color tokens live remotely or in a different format.",[486,831,834],{"className":832,"code":833,"language":491,"meta":492},[489],"\u003Cscript setup lang=\"ts\">\nimport type { ChartConfig } from '@/components/ui/chart'\nimport { Monitor } from 'lucide-vue-next'\n\nconst chartConfig = {\n  desktop: {\n    label: 'Desktop',\n    icon: Monitor,\n    // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'\n    color: 'var(--chart-1)',\n    // OR a theme object with 'light' and 'dark' keys\n    theme: {\n      light: 'var(--chart-1)',\n      dark: 'var(--chart-2)',\n    },\n  },\n} satisfies ChartConfig\n\u003C/script>\n",[474,835,833],{"__ignoreMap":495},[457,837,49],{"id":838},"theming",[437,840,841],{},"Charts has built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.",[650,843,845],{"id":844},"css-variables","CSS Variables",[539,847,848,853,859,867],{},[542,849,850],{},[437,851,852],{},"Define your colors in your css file",[486,854,857],{"className":855,"code":856,"language":579,"meta":492},[577],"@layer base {\n  :root {\n    --chart-1: oklch(0.646 0.222 41.116);\n    --chart-2: oklch(0.6 0.118 184.704);\n  }\n\n  .dark {\n    --chart-1: oklch(0.488 0.243 264.376);\n    --chart-2: oklch(0.696 0.17 162.48);\n  }\n}\n",[474,858,856],{"__ignoreMap":495},[542,860,861],{},[437,862,863,864],{},"Add the color to your ",[474,865,866],{},"chartConfig",[486,868,873],{"className":869,"code":870,"highlights":871,"language":614,"meta":492},[612],"const chartConfig = {\n  desktop: {\n    label: 'Desktop',\n    color: 'var(--chart-1)',\n  },\n  mobile: {\n    label: 'Mobile',\n    color: 'var(--chart-2)',\n  },\n} satisfies ChartConfig\n",[786,872],8,[474,874,870],{"__ignoreMap":495},[650,876,878],{"id":877},"hex-hsl-or-oklch","hex, hsl or oklch",[437,880,881],{},"You can also define your colors directly in the chart config. Use the color format you prefer.",[486,883,886],{"className":884,"code":885,"language":614,"meta":492},[612],"const chartConfig = {\n  desktop: {\n    label: 'Desktop',\n    color: '#2563eb',\n  },\n} satisfies ChartConfig\n",[474,887,885],{"__ignoreMap":495},[650,889,891],{"id":890},"using-colors","Using Colors",[437,893,894,895,455],{},"To use the theme colors in your chart, reference the colors using the format ",[474,896,897],{},"var(--color-KEY)",[899,900,91],"h4",{"id":901},"components",[486,903,906],{"className":904,"code":905,"language":491,"meta":492},[489],"\u003CVisGroupedBar\n  :x=\"(d) => d.month\"\n  :y=\"(d) => d.desktop\"\n  color=\"var(--color-desktop)\"\n/>\n",[474,907,905],{"__ignoreMap":495},[899,909,911],{"id":910},"chart-data","Chart Data",[486,913,916],{"className":914,"code":915,"language":614,"meta":492},[612],"const chartData = [\n  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n",[474,917,915],{"__ignoreMap":495},[457,919,346],{"id":920},"tooltip",[437,922,923],{},"A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.",[437,925,926,927,930,931,934,935,938],{},"You can turn on/off any of these using the ",[474,928,929],{},"hideLabel",", ",[474,932,933],{},"hideIndicator"," props and customize the indicator style using the ",[474,936,937],{},"indicator"," prop.",[437,940,941,942,704,945,948],{},"Use ",[474,943,944],{},"labelKey",[474,946,947],{},"nameKey"," to use a custom key for the tooltip label and name.",[437,950,951,952,704,954,956],{},"Chart comes with the ",[474,953,483],{},[474,955,707],{}," components. You can use these two components to add custom tooltips to your chart.",[486,958,961],{"className":959,"code":960,"language":614,"meta":492},[612],"import { ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'\n",[474,962,960],{"__ignoreMap":495},[486,964,967],{"className":965,"code":966,"language":491,"meta":492},[489],"\u003Ctemplate>\n  \u003CChartTooltip />\n  \u003CChartCrosshair\n    :template=\"componentToString(chartConfig, ChartTooltipContent)\"\n  />\n\u003C/template>\n",[474,968,966],{"__ignoreMap":495},[650,970,972],{"id":971},"props","Props",[437,974,975],{},"Use the following props to customize the tooltip.",[977,978,979,996],"table",{},[980,981,982],"thead",{},[983,984,985,990,993],"tr",{},[986,987,989],"th",{"align":988},"left","Prop",[986,991,992],{"align":988},"Type",[986,994,995],{"align":988},"Description",[997,998,999,1012,1023,1045,1057],"tbody",{},[983,1000,1001,1006,1009],{},[1002,1003,1004],"td",{"align":988},[474,1005,944],{},[1002,1007,1008],{"align":988},"string",[1002,1010,1011],{"align":988},"The config or data key to use for the label.",[983,1013,1014,1018,1020],{},[1002,1015,1016],{"align":988},[474,1017,947],{},[1002,1019,1008],{"align":988},[1002,1021,1022],{"align":988},"The config or data key to use for the name.",[983,1024,1025,1029,1042],{},[1002,1026,1027],{"align":988},[474,1028,937],{},[1002,1030,1031,1034,1035,1038,1039],{"align":988},[474,1032,1033],{},"dot"," ",[474,1036,1037],{},"line"," or ",[474,1040,1041],{},"dashed",[1002,1043,1044],{"align":988},"The indicator style for the tooltip.",[983,1046,1047,1051,1054],{},[1002,1048,1049],{"align":988},[474,1050,929],{},[1002,1052,1053],{"align":988},"boolean",[1002,1055,1056],{"align":988},"Whether to hide the label.",[983,1058,1059,1063,1065],{},[1002,1060,1061],{"align":988},[474,1062,933],{},[1002,1064,1053],{"align":988},[1002,1066,1067],{"align":988},"Whether to hide the indicator.",[650,1069,1071],{"id":1070},"colors","Colors",[437,1073,1074],{},"Colors are automatically referenced from the chart config.",[650,1076,1078],{"id":1077},"custom","Custom",[437,1080,1081,1082,704,1084,1086],{},"To use a custom key for tooltip label and names, use the ",[474,1083,944],{},[474,1085,947],{}," props.",[486,1088,1091],{"className":1089,"code":1090,"language":614,"meta":492},[612],"const chartData = [\n  { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },\n  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: 'Total Visitors',\n  },\n  chrome: {\n    label: 'Chrome',\n    color: 'var(--chart-1)',\n  },\n  safari: {\n    label: 'Safari',\n    color: 'var(--chart-2)',\n  },\n} satisfies ChartConfig\n",[474,1092,1090],{"__ignoreMap":495},[486,1094,1097],{"className":1095,"code":1096,"language":491,"meta":492},[489],"\u003Ctemplate>\n  \u003CChartCrosshair\n    :template=\"componentToString(chartConfig, ChartTooltipContent, {\n      labelKey: 'visitors',\n      nameKey: 'browser',\n    })\"\n  />\n\u003C/template>\n",[474,1098,1096],{"__ignoreMap":495},[437,1100,1101,1102,1105,1106,704,1109,1112],{},"This will use ",[474,1103,1104],{},"Total Visitors"," for label and ",[474,1107,1108],{},"Chrome",[474,1110,1111],{},"Safari"," for the tooltip names.",[457,1114,816],{"id":1115},"legend",[437,1117,1118,1119,1122],{},"You can use the custom ",[474,1120,1121],{},"\u003CChartLegendContent>"," components to add a legend to your chart.",[486,1124,1126],{"className":1125,"code":773,"language":614,"meta":495},[612],[474,1127,773],{"__ignoreMap":495},[486,1129,1132],{"className":1130,"code":1131,"language":491,"meta":495},[489],"\u003Ctemplate>\n  \u003CChartLegendContent />\n\u003C/template>\n",[474,1133,1131],{"__ignoreMap":495},[650,1135,1071],{"id":1136},"colors-1",[437,1138,1074],{},[650,1140,1078],{"id":1141},"custom-1",[437,1143,1144,1145,938],{},"To use a custom key for legend names, use the ",[474,1146,947],{},[486,1148,1154],{"className":1149,"code":1151,"language":1152,"meta":1153},[1150],"language-tsx","const chartData = [\n  { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },\n  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n  chrome: {\n    label: 'Chrome',\n    color: 'hsl(var(--chart-1))',\n  },\n  safari: {\n    label: 'Safari',\n    color: 'hsl(var(--chart-2))',\n  },\n} satisfies ChartConfig\n","tsx","showLineNumbers /browser/",[474,1155,1151],{"__ignoreMap":495},[486,1157,1160],{"className":1158,"code":1159,"language":491,"meta":495},[489],"\u003Ctemplate>\n  \u003CChartLegendContent name-key=\"browser\" />\n\u003C/template>\n",[474,1161,1159],{"__ignoreMap":495},[437,1163,1101,1164,704,1166,1168],{},[474,1165,1108],{},[474,1167,1111],{}," for the legend names.",{"title":495,"searchDepth":1170,"depth":1170,"links":1171},2,[1172,1173,1174,1175,1181,1182,1187,1192],{"id":99,"depth":1170,"text":459},{"id":506,"depth":1170,"text":20},{"id":584,"depth":1170,"text":585},{"id":594,"depth":1170,"text":595,"children":1176},[1177,1179,1180],{"id":652,"depth":1178,"text":653},3,{"id":697,"depth":1178,"text":698},{"id":748,"depth":1178,"text":749},{"id":819,"depth":1170,"text":820},{"id":838,"depth":1170,"text":49,"children":1183},[1184,1185,1186],{"id":844,"depth":1178,"text":845},{"id":877,"depth":1178,"text":878},{"id":890,"depth":1178,"text":891},{"id":920,"depth":1170,"text":346,"children":1188},[1189,1190,1191],{"id":971,"depth":1178,"text":972},{"id":1070,"depth":1178,"text":1071},{"id":1077,"depth":1178,"text":1078},{"id":1115,"depth":1170,"text":816,"children":1193},[1194,1195],{"id":1136,"depth":1178,"text":1071},{"id":1141,"depth":1178,"text":1078},"Beautiful charts. Built using Unovis. Copy and paste into your apps.","md",null,{"component":132},"---\ntitle: Chart\ndescription: Beautiful charts. Built using Unovis. Copy and paste into your apps.\ncomponent: true\n---\n\n::component-preview\n---\nname: \"ChartBarInteractive\"\nclass: \"theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none\"\nhideCode: true\n---\n::\n\nIntroducing **Charts**. A collection of chart components that you can copy and paste into your apps.\n\nCharts are designed to look great out of the box. They work well with the other components and are fully customizable to fit your project.\n\n[Browse the Charts Library](/charts).\n\n## Component\n\nWe use [Unovis](https://unovis.dev/) under the hood.\n\nWe designed the `chart` component with composition in mind. **You build your charts using Unovis components and only bring in custom components, such as `ChartTooltip`, when and where you need it**.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport { VisGroupedBar, VisXYContainer } from '@unovis/vue'\nimport { ChartContainer, ChartTooltipContent } from '@/components/ui/chart'\n\u003C/script>\n\n\u003Ctemplate>\n  \u003CChartContainer :config=\"chartConfig\">\n    \u003CVisXYContainer :data=\"data\">\n      \u003CVisGroupedBar :x=\"(d) => d.month\" :y=\"(d) => d.value\" />\n      \u003CChartTooltip :template=\"componentToString(chartConfig, ChartTooltipContent)\" />\n    \u003C/VisXYContainer>\n  \u003C/ChartContainer>\n\u003C/template>\n```\n\nWe do not wrap Unovis. This means you're not locked into an abstraction. When a new Unovis version is released, you can follow the official upgrade path to upgrade your charts.\n\n**The components are yours**.\n\n## Installation\n\n::code-tabs\n\n::tabs-list\n\n  ::tabs-trigger{value=\"cli\"}\n  CLI\n  ::\n\n  ::tabs-trigger{value=\"manual\"}\n  Manual\n  ::\n\n::\n\n::tabs-content{value=\"cli\"}\n\n```bash\nnpx shadcn-vue@latest add chart\n```\n\n::\n\n::tabs-content{value=\"manual\"}\n\n  ::steps\n    ::step\n    Install the following dependencies\n    ::\n\n    ```bash\n    npm install @unovis/ts @unovis/vue\n    ```\n\n    ::step\n    Copy and paste the [GitHub source code](https://github.com/unovue/shadcn-vue/tree/dev/apps/v4/registry/new-york-v4/ui/chart) into your project\n    ::\n\n    ::step\n    Update the import paths to match your project setup\n    ::\n\n    ::step\n    Add the following colors to your CSS file\n    ::\n\n    ```css\n    @layer base {\n      :root {\n        --chart-1: oklch(0.646 0.222 41.116);\n        --chart-2: oklch(0.6 0.118 184.704);\n        --chart-3: oklch(0.398 0.07 227.392);\n        --chart-4: oklch(0.828 0.189 84.429);\n        --chart-5: oklch(0.769 0.188 70.08);\n      }\n\n      .dark {\n        --chart-1: oklch(0.488 0.243 264.376);\n        --chart-2: oklch(0.696 0.17 162.48);\n        --chart-3: oklch(0.769 0.188 70.08);\n        --chart-4: oklch(0.627 0.265 303.9);\n        --chart-5: oklch(0.645 0.246 16.439);\n      }\n    }\n    ```\n  ::\n\n::\n\n::\n\n## Usage\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport type { ChartConfig } from '@/components/ui/chart'\nimport { VisGroupedBar, VisXYContainer } from '@unovis/vue'\nimport {\n  ChartContainer,\n  ChartCrosshair,\n  ChartTooltip,\n  ChartTooltipContent,\n  componentToString,\n} from '@/components/ui/chart'\n\nconst chartData = [\n  { date: new Date(\"2024-01-01\"), desktop: 186, mobile: 80 },\n  { date: new Date(\"2024-02-01\"), desktop: 305, mobile: 200 },\n  { date: new Date(\"2024-03-01\"), desktop: 237, mobile: 120 },\n];\ntype Data = (typeof chartData)[number]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\u003C/script>\n\u003Ctemplate>\n  \u003CChartContainer :config=\"chartConfig\" class=\"min-h-[400px] w-full\">\n    \u003CVisXYContainer :data=\"chartData\">\n      \u003CVisGroupedBar\n        :x=\"(d: Data) => d.date\"\n        :y=\"[(d: Data) => d.desktop, (d: Data) => d.mobile]\"\n        :color=\"[chartConfig.desktop.color, chartConfig.mobile.color]\"\n      />\n      \u003CChartTooltip />\n      \u003CChartCrosshair\n        :template=\"\n          componentToString(chartConfig, ChartTooltipContent, {\n            labelFormatter(d) {\n              return new Date(d).toLocaleDateString('en-US', {\n                month: 'long',\n              });\n            },\n          })\n        \"\n        :color=\"[chartConfig.desktop.color, chartConfig.mobile.color]\"\n      />\n    \u003C/VisXYContainer>\n  \u003C/ChartContainer>\n\u003C/template>\n```\n\n## Your First Chart\n\nLet's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.\n\n::steps\n\n  ::step\n  Start by defining your data\n  ::\n\n  The following data represents the number of desktop and mobile users for each month.\n\n  ```ts showLineNumbers\n  const chartData = [\n    { month: 'January', desktop: 186, mobile: 80 },\n    { month: 'February', desktop: 305, mobile: 200 },\n    { month: 'March', desktop: 237, mobile: 120 },\n    { month: 'April', desktop: 73, mobile: 190 },\n    { month: 'May', desktop: 209, mobile: 130 },\n    { month: 'June', desktop: 214, mobile: 140 },\n  ]\n  ```\n\n  ::step\n  Define your chart config\n  ::\n\n  The chart config holds configuration for the chart. This is where you place human-readable strings, such as labels, icons and color tokens for theming.\n\n  ```ts showLineNumbers\n  import type { ChartConfig } from '@/components/ui/chart'\n\n  const chartConfig = {\n    desktop: {\n      label: 'Desktop',\n      color: 'var(--chart-1)',\n    },\n    mobile: {\n      label: 'Mobile',\n      color: 'var(--chart-2)',\n    },\n  } satisfies ChartConfig\n  ```\n\n  ::step\n  Build your chart\n  ::\n\n  You can now build your chart using Unovis components.\n\n  ::component-source{name=\"ChartBarDemo\" title=\"components/ExampleChart.vue\"}\n  ::\n\n  ::component-preview\n  ---\n  name: ChartBarDemo\n  class: '[&_.preview]:min-h-[250px] [&_.preview]:p-4'\n  ---\n  ::\n\n::\n\n### Add an Axis\n\nTo add axes to the chart, we use the `VisAxis` component.\n\n::steps\n\n  ::step\n  Import the `VisAxis` component\n  ::\n\n  ```vue showLineNumbers\n  import { VisAxis, VisGroupedBar, VisXYContainer } from '@unovis/vue'\n  ```\n\n  ::step\n  Add the `VisAxis` components to your chart\n  ::\n\n  ```vue showLineNumbers\n  \u003Ctemplate>\n    \u003CVisAxis\n      type=\"x\"\n      :x=\"(d: Data) => d.date\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      :grid-line=\"false\"\n      :tick-format=\"(d: number) => {\n        const date = new Date(d)\n        return date.toLocaleDateString('en-US', {\n          month: 'short',\n        })\n      }\"\n      :tick-values=\"chartData.map(d => d.date)\"\n    />\n    \u003CVisAxis\n      type=\"y\"\n      :tick-format=\"(d: number) => ''\"\n      :tick-line=\"false\"\n      :domain-line=\"false\"\n      :grid-line=\"true\"\n    />\n  \u003C/template>\n  ```\n\n  ::component-preview\n  ---\n  name: ChartBarDemoAxis\n  class: '[&_.preview]:min-h-[250px] [&_.preview]:p-4'\n  ---\n  ::\n\n::\n\n### Add Tooltip\n\nTo add a tooltip, we'll use the custom `ChartTooltip` and `ChartTooltipContent` components from `chart`.\n\n::steps\n\n  ::step\n  Import the `ChartTooltip` and `ChartTooltipContent` components\n  ::\n\n  ```ts\n  import { ChartTooltip, ChartTooltipContent, componentToString } from '@/components/ui/chart'\n  ```\n\n  ::step\n  Add the components to your chart\n  ::\n\n  ```vue showLineNumbers\n  \u003CChartTooltip />\n\n  \u003CChartCrosshair :template=\"componentToString(chartConfig, ChartTooltipContent)\" />\n  ```\n\n  ::component-preview\n  ---\n  name: ChartBarDemoTooltip\n  class: '[&_.preview]:min-h-[250px] [&_.preview]:p-4'\n  ---\n  ::\n\n  Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.\n\n::\n\n### Add Legend\n\nWe'll do the same for the legend. We'll use the `ChartLegend` and `ChartLegendContent` components from `chart`.\n\n::steps\n\n  ::step\n  Import the `ChartLegendContent` components.\n  ::\n\n  ```ts\n  import { ChartLegendContent } from '@/components/ui/chart'\n  ```\n\n  ::step\n  Add the components to your chart.\n  ::\n\n  ```vue showLineNumbers {4}\n  \u003Ctemplate>\n    \u003CChartContainer :config=\"chartConfig\" class=\"min-h-[200px] w-full\">\n      \u003CVisXYContainer :data=\"chartData\" />\n      \u003CChartLegendContent />\n    \u003C/ChartContainer>\n  \u003C/template>\n  ```\n\n  ::component-preview\n  ---\n  name: ChartBarDemoLegend\n  class: '[&_.preview]:min-h-[250px] [&_.preview]:p-4'\n  ---\n  ::\n::\n\nDone. You've built your first chart! What's next?\n\n- [Themes and Colors](/docs/components/chart#theming)\n- [Tooltip](/docs/components/chart#tooltip)\n- [Legend](/docs/components/chart#legend)\n\n## Chart Config\n\nThe chart config is where you define the labels, icons and colors for a chart.\n\nIt is intentionally decoupled from chart data.\n\nThis allows you to share config and color tokens between charts. It can also works independently for cases where your data or color tokens live remotely or in a different format.\n\n```vue showLineNumbers\n\u003Cscript setup lang=\"ts\">\nimport type { ChartConfig } from '@/components/ui/chart'\nimport { Monitor } from 'lucide-vue-next'\n\nconst chartConfig = {\n  desktop: {\n    label: 'Desktop',\n    icon: Monitor,\n    // A color like 'hsl(220, 98%, 61%)' or 'var(--color-name)'\n    color: 'var(--chart-1)',\n    // OR a theme object with 'light' and 'dark' keys\n    theme: {\n      light: 'var(--chart-1)',\n      dark: 'var(--chart-2)',\n    },\n  },\n} satisfies ChartConfig\n\u003C/script>\n```\n\n## Theming\n\nCharts has built-in support for theming. You can use css variables (recommended) or color values in any color format, such as hex, hsl or oklch.\n\n### CSS Variables\n\n::steps\n\n  ::step\n  Define your colors in your css file\n  ::\n\n  ```css showLineNumbers\n  @layer base {\n    :root {\n      --chart-1: oklch(0.646 0.222 41.116);\n      --chart-2: oklch(0.6 0.118 184.704);\n    }\n\n    .dark {\n      --chart-1: oklch(0.488 0.243 264.376);\n      --chart-2: oklch(0.696 0.17 162.48);\n    }\n  }\n  ```\n\n  ::step\n  Add the color to your `chartConfig`\n  ::\n\n  ```ts showLineNumbers {4,8}\n  const chartConfig = {\n    desktop: {\n      label: 'Desktop',\n      color: 'var(--chart-1)',\n    },\n    mobile: {\n      label: 'Mobile',\n      color: 'var(--chart-2)',\n    },\n  } satisfies ChartConfig\n  ```\n\n::\n\n### hex, hsl or oklch\n\nYou can also define your colors directly in the chart config. Use the color format you prefer.\n\n```ts showLineNumbers\nconst chartConfig = {\n  desktop: {\n    label: 'Desktop',\n    color: '#2563eb',\n  },\n} satisfies ChartConfig\n```\n\n### Using Colors\n\nTo use the theme colors in your chart, reference the colors using the format `var(--color-KEY)`.\n\n#### Components\n\n```vue showLineNumbers\n\u003CVisGroupedBar\n  :x=\"(d) => d.month\"\n  :y=\"(d) => d.desktop\"\n  color=\"var(--color-desktop)\"\n/>\n```\n\n#### Chart Data\n\n```ts showLineNumbers\nconst chartData = [\n  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },\n  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n```\n\n## Tooltip\n\nA chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.\n\nYou can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.\n\nUse `labelKey` and `nameKey` to use a custom key for the tooltip label and name.\n\nChart comes with the `ChartTooltip` and `ChartTooltipContent` components. You can use these two components to add custom tooltips to your chart.\n\n```ts showLineNumbers\nimport { ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'\n```\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CChartTooltip />\n  \u003CChartCrosshair\n    :template=\"componentToString(chartConfig, ChartTooltipContent)\"\n  />\n\u003C/template>\n```\n\n### Props\n\nUse the following props to customize the tooltip.\n\n| Prop            | Type                     | Description                                  |\n| :-------------- | :----------------------- | :------------------------------------------- |\n| `labelKey`      | string                   | The config or data key to use for the label. |\n| `nameKey`       | string                   | The config or data key to use for the name.  |\n| `indicator`     | `dot` `line` or `dashed` | The indicator style for the tooltip.         |\n| `hideLabel`     | boolean                  | Whether to hide the label.                   |\n| `hideIndicator` | boolean                  | Whether to hide the indicator.               |\n\n### Colors\n\nColors are automatically referenced from the chart config.\n\n### Custom\n\nTo use a custom key for tooltip label and names, use the `labelKey` and `nameKey` props.\n\n```ts showLineNumbers\nconst chartData = [\n  { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },\n  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: 'Total Visitors',\n  },\n  chrome: {\n    label: 'Chrome',\n    color: 'var(--chart-1)',\n  },\n  safari: {\n    label: 'Safari',\n    color: 'var(--chart-2)',\n  },\n} satisfies ChartConfig\n```\n\n```vue showLineNumbers\n\u003Ctemplate>\n  \u003CChartCrosshair\n    :template=\"componentToString(chartConfig, ChartTooltipContent, {\n      labelKey: 'visitors',\n      nameKey: 'browser',\n    })\"\n  />\n\u003C/template>\n```\n\nThis will use `Total Visitors` for label and `Chrome` and `Safari` for the tooltip names.\n\n## Legend\n\nYou can use the custom `\u003CChartLegendContent>` components to add a legend to your chart.\n\n```ts\nimport { ChartLegendContent } from '@/components/ui/chart'\n```\n\n```vue\n\u003Ctemplate>\n  \u003CChartLegendContent />\n\u003C/template>\n```\n\n### Colors\n\nColors are automatically referenced from the chart config.\n\n### Custom\n\nTo use a custom key for legend names, use the `nameKey` prop.\n\n```tsx showLineNumbers /browser/\nconst chartData = [\n  { browser: 'chrome', visitors: 187, fill: 'var(--color-chrome)' },\n  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },\n]\n\nconst chartConfig = {\n  chrome: {\n    label: 'Chrome',\n    color: 'hsl(var(--chart-1))',\n  },\n  safari: {\n    label: 'Safari',\n    color: 'hsl(var(--chart-2))',\n  },\n} satisfies ChartConfig\n```\n\n```vue\n\u003Ctemplate>\n  \u003CChartLegendContent name-key=\"browser\" />\n\u003C/template>\n```\n\nThis will use `Chrome` and `Safari` for the legend names.\n",{"title":146,"description":1196},"RY9UKLUZ6yLYtFTQdzI-36W4Lcx6Mdc605ZssBpx268",[1204,1205],{"title":142,"path":143,"stem":144,"children":-1},{"title":150,"path":151,"stem":152,"children":-1},1775649976725]