[{"data":1,"prerenderedAt":445},["ShallowReactive",2],{"navigation_docs":3,"-guides-customize":284,"-guides-customize-surround":440},[4,31,117,216],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",{"title":26,"path":27,"stem":28,"icon":29},"Why vccs","\u002Fgetting-started\u002Fwhy-vccs","1.getting-started\u002F4.why-vccs","i-lucide-scale",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72,77,82,87,92,97,102,107,112],{"title":38,"path":39,"stem":40,"icon":41},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":43,"path":44,"stem":45,"icon":46},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":78,"path":79,"stem":80,"icon":81},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":83,"path":84,"stem":85,"icon":86},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":88,"path":89,"stem":90,"icon":91},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":93,"path":94,"stem":95,"icon":96},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":98,"path":99,"stem":100,"icon":101},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":103,"path":104,"stem":105,"icon":106},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":108,"path":109,"stem":110,"icon":111},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":113,"path":114,"stem":115,"icon":116},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":118,"icon":119,"path":120,"stem":121,"children":122,"page":30},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[123,128,133,138,143,148,153,158,163,168,172,177,182,187,192,197,202,206,211],{"title":124,"path":125,"stem":126,"icon":127},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":129,"path":130,"stem":131,"icon":132},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":134,"path":135,"stem":136,"icon":137},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":139,"path":140,"stem":141,"icon":142},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":144,"path":145,"stem":146,"icon":147},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":149,"path":150,"stem":151,"icon":152},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":154,"path":155,"stem":156,"icon":157},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":159,"path":160,"stem":161,"icon":162},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":164,"path":165,"stem":166,"icon":167},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":169,"path":170,"stem":171,"icon":56},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":173,"path":174,"stem":175,"icon":176},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":178,"path":179,"stem":180,"icon":181},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":183,"path":184,"stem":185,"icon":186},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":188,"path":189,"stem":190,"icon":191},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":193,"path":194,"stem":195,"icon":196},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":198,"path":199,"stem":200,"icon":201},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":203,"path":204,"stem":205,"icon":142},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":207,"path":208,"stem":209,"icon":210},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":212,"path":213,"stem":214,"icon":215},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":217,"icon":218,"path":219,"stem":220,"children":221,"page":30},"Components","i-lucide-code","\u002Fcomponents","4.components",[222,227,232,236,241,245,250,254,259,264,269,274,279],{"title":223,"path":224,"stem":225,"icon":226},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":228,"path":229,"stem":230,"icon":231},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":233,"path":234,"stem":235,"icon":201},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":237,"path":238,"stem":239,"icon":240},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":242,"path":243,"stem":244,"icon":152},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":246,"path":247,"stem":248,"icon":249},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":251,"path":252,"stem":253,"icon":61},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":255,"path":256,"stem":257,"icon":258},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":260,"path":261,"stem":262,"icon":263},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":265,"path":266,"stem":267,"icon":268},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":270,"path":271,"stem":272,"icon":273},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":275,"path":276,"stem":277,"icon":278},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":280,"path":281,"stem":282,"icon":283},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":285,"title":38,"body":286,"description":433,"extension":434,"links":435,"meta":436,"navigation":437,"path":39,"seo":438,"stem":40,"__hash__":439},"docs\u002F2.guides\u002F01.customize.md",{"type":287,"value":288,"toc":422},"minimark",[289,298,303,314,318,321,327,331,342,347,351,354,359,363,366,371,375,382,387,391,396,401],[290,291,292,293,297],"p",{},"vccs components are designed to be customizable. You can override almost any visual element using Vue slots, the ",[294,295,296],"code",{},"\u003CCell>"," component, or direct SVG attributes.",[299,300,302],"h2",{"id":301},"theming","Theming",[290,304,305,306,309,310,313],{},"Default colors come from ",[294,307,308],{},"--v-charts-*"," CSS variables. See ",[311,312,98],"a",{"href":99}," for the full list.",[299,315,317],{"id":316},"labels-and-axis-ticks-can-be-customized","Labels and axis ticks can be customized",[290,319,320],{},"For example, we can create a bar with customized axis tick that rotates the text:",[322,323],"chart-demo",{"description":324,"name":325,"src":326},"Bar chart with rotated custom tick labels via #tick slot.","Custom Axis Ticks","guide-charts\u002Fcustom-tick-chart",[299,328,330],{"id":329},"the-shape-of-bar-can-be-customized","The shape of bar can be customized",[290,332,333,334,337,338,341],{},"The ",[294,335,336],{},"#shape"," slot of ",[294,339,340],{},"\u003CBar \u002F>"," can render any custom SVG shape. Here's a triangle\u002Fleaf shape:",[322,343],{"description":344,"name":345,"src":346},"Bar chart with custom triangle shape via #shape slot.","Custom Bar Shape","guide-charts\u002Fcustom-shape-bar-chart",[299,348,350],{"id":349},"the-content-of-tooltip-can-be-customized","The content of tooltip can be customized",[290,352,353],{},"Sometimes we may want tooltip to display much more information:",[322,355],{"description":356,"name":357,"src":358},"Bar chart with custom tooltip showing descriptive text per page.","Custom Tooltip","guide-charts\u002Fcustom-tooltip-chart",[299,360,362],{"id":361},"the-style-of-each-chart-element-can-be-customized","The style of each chart element can be customized",[290,364,365],{},"Except tooltip and legend, all elements in a chart are drawn by SVG. You can change the attributes of each chart element conveniently:",[322,367],{"description":368,"name":369,"src":370},"Bar chart with colored grid, styled axis, and custom bar fill.","SVG Element Styling","guide-charts\u002Fsvg-attrs-chart",[299,372,374],{"id":373},"the-style-of-legend-can-be-customized","The style of legend can be customized",[290,376,377,378,381],{},"Legend is an HTML element. You can change its style using the ",[294,379,380],{},"wrapper-style"," prop:",[322,383],{"description":384,"name":385,"src":386},"Bar chart with custom legend background and border styling.","Styled Legend","guide-charts\u002Fcustom-legend-chart",[299,388,390],{"id":389},"per-item-styling-with-cell","Per-item styling with Cell",[290,392,333,393,395],{},[294,394,296],{}," component lets you style individual data points differently:",[322,397],{"description":398,"name":399,"src":400},"Bar chart with per-bar colors using the Cell component.","Cell Colors","guide-charts\u002Fcell-colors-chart",[290,402,403,406,407,410,411,414,415,418,419,421],{},[294,404,405],{},"Cell"," works with ",[294,408,409],{},"\u003CBar>",", ",[294,412,413],{},"\u003CPie>",", and ",[294,416,417],{},"\u003CFunnel>"," components. Each ",[294,420,405],{}," maps by index to its corresponding data entry.",{"title":423,"searchDepth":424,"depth":424,"links":425},"",2,[426,427,428,429,430,431,432],{"id":301,"depth":424,"text":302},{"id":316,"depth":424,"text":317},{"id":329,"depth":424,"text":330},{"id":349,"depth":424,"text":350},{"id":361,"depth":424,"text":362},{"id":373,"depth":424,"text":374},{"id":389,"depth":424,"text":390},"Learn how to customize chart appearance using slots, Cell, and SVG attributes","md",null,{},{"icon":41},{"title":38,"description":433},"l1XfOnNcdZW8ehrOuqkXq3un0jvs6Y4VT1mWWOGvOao",[441,443],{"title":26,"path":27,"stem":28,"description":442,"icon":29,"children":-1},"How vccs compares with other charting libraries for Vue, and when to pick another one",{"title":43,"path":44,"stem":45,"description":444,"icon":46,"children":-1},"Set the axis range, and control tick count, placement, spacing and labels",1793527165704]