[{"data":1,"prerenderedAt":322},["ShallowReactive",2],{"navigation_docs":3,"-guides-customize":177,"-guides-customize-surround":317},[4,21,77,137],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":20},"Getting Started","i-lucide-rocket","/getting-started","1.getting-started",[10,15],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","/getting-started/introduction","1.getting-started/1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","/getting-started/installation","1.getting-started/2.installation","i-lucide-download",false,{"title":22,"icon":23,"path":24,"stem":25,"children":26,"page":20},"Guides","i-lucide-book-open","/guides","2.guides",[27,32,37,42,47,52,57,62,67,72],{"title":28,"path":29,"stem":30,"icon":31},"Customize","/guides/customize","2.guides/01.customize","i-lucide-paintbrush",{"title":33,"path":34,"stem":35,"icon":36},"Active Index","/guides/active-state","2.guides/02.active-state","i-lucide-mouse-pointer",{"title":38,"path":39,"stem":40,"icon":41},"Domain and Ticks","/guides/domain-and-ticks","2.guides/03.domain-and-ticks","i-lucide-ruler",{"title":43,"path":44,"stem":45,"icon":46},"Axis Ticks","/guides/axis-ticks","2.guides/04.axis-ticks","i-lucide-hash",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","/guides/chart-size","2.guides/05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Index and Layers","/guides/z-order-and-layers","2.guides/06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","/guides/coordinate-systems","2.guides/07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","/guides/performance","2.guides/08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","/guides/rounded-bar-corners","2.guides/09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","/guides/bar-alignment","2.guides/10.bar-alignment","i-lucide-align-center",{"title":78,"icon":79,"path":80,"stem":81,"children":82,"page":20},"Charts","i-lucide-bar-chart-3","/charts","3.charts",[83,88,93,98,103,108,113,118,123,128,133],{"title":84,"path":85,"stem":86,"icon":87},"Area Chart","/charts/area-chart","3.charts/1.area-chart","i-lucide-area-chart",{"title":89,"path":90,"stem":91,"icon":92},"Treemap","/charts/treemap","3.charts/10.treemap","i-lucide-layout-grid",{"title":94,"path":95,"stem":96,"icon":97},"Sankey","/charts/sankey","3.charts/11.sankey","i-lucide-git-fork",{"title":99,"path":100,"stem":101,"icon":102},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":104,"path":105,"stem":106,"icon":107},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":109,"path":110,"stem":111,"icon":112},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":114,"path":115,"stem":116,"icon":117},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":119,"path":120,"stem":121,"icon":122},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":124,"path":125,"stem":126,"icon":127},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":129,"path":130,"stem":131,"icon":132},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":134,"path":135,"stem":136,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":138,"icon":139,"path":140,"stem":141,"children":142,"page":20},"Components","i-lucide-code","/components","4.components",[143,148,153,158,163,167,172],{"title":144,"path":145,"stem":146,"icon":147},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":149,"path":150,"stem":151,"icon":152},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":154,"path":155,"stem":156,"icon":157},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":159,"path":160,"stem":161,"icon":162},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":164,"path":165,"stem":166,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":168,"path":169,"stem":170,"icon":171},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":173,"path":174,"stem":175,"icon":176},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":178,"title":28,"body":179,"description":310,"extension":311,"links":312,"meta":313,"navigation":314,"path":29,"seo":315,"stem":30,"__hash__":316},"docs/2.guides/01.customize.md",{"type":180,"value":181,"toc":300},"minimark",[182,191,196,199,205,209,220,225,229,232,237,241,244,249,253,260,265,269,274,279],[183,184,185,186,190],"p",{},"vccs components are designed to be customizable. You can override almost any visual element using Vue slots, the ",[187,188,189],"code",{},"\u003CCell>"," component, or direct SVG attributes.",[192,193,195],"h2",{"id":194},"labels-and-axis-ticks-can-be-customized","Labels and axis ticks can be customized",[183,197,198],{},"For example, we can create a bar with customized axis tick that rotates the text:",[200,201],"chart-demo",{"description":202,"name":203,"src":204},"Bar chart with rotated custom tick labels via #tick slot.","Custom Axis Ticks","guide-charts/custom-tick-chart",[192,206,208],{"id":207},"the-shape-of-bar-can-be-customized","The shape of bar can be customized",[183,210,211,212,215,216,219],{},"The ",[187,213,214],{},"#shape"," slot of ",[187,217,218],{},"\u003CBar />"," can render any custom SVG shape. Here's a triangle/leaf shape:",[200,221],{"description":222,"name":223,"src":224},"Bar chart with custom triangle shape via #shape slot.","Custom Bar Shape","guide-charts/custom-shape-bar-chart",[192,226,228],{"id":227},"the-content-of-tooltip-can-be-customized","The content of tooltip can be customized",[183,230,231],{},"Sometimes we may want tooltip to display much more information:",[200,233],{"description":234,"name":235,"src":236},"Bar chart with custom tooltip showing descriptive text per page.","Custom Tooltip","guide-charts/custom-tooltip-chart",[192,238,240],{"id":239},"the-style-of-each-chart-element-can-be-customized","The style of each chart element can be customized",[183,242,243],{},"Except tooltip and legend, all elements in a chart are drawn by SVG. You can change the attributes of each chart element conveniently:",[200,245],{"description":246,"name":247,"src":248},"Bar chart with colored grid, styled axis, and custom bar fill.","SVG Element Styling","guide-charts/svg-attrs-chart",[192,250,252],{"id":251},"the-style-of-legend-can-be-customized","The style of legend can be customized",[183,254,255,256,259],{},"Legend is an HTML element. You can change its style using the ",[187,257,258],{},"wrapper-style"," prop:",[200,261],{"description":262,"name":263,"src":264},"Bar chart with custom legend background and border styling.","Styled Legend","guide-charts/custom-legend-chart",[192,266,268],{"id":267},"per-item-styling-with-cell","Per-item styling with Cell",[183,270,211,271,273],{},[187,272,189],{}," component lets you style individual data points differently:",[200,275],{"description":276,"name":277,"src":278},"Bar chart with per-bar colors using the Cell component.","Cell Colors","guide-charts/cell-colors-chart",[183,280,281,284,285,288,289,292,293,296,297,299],{},[187,282,283],{},"Cell"," works with ",[187,286,287],{},"\u003CBar>",", ",[187,290,291],{},"\u003CPie>",", and ",[187,294,295],{},"\u003CFunnel>"," components. Each ",[187,298,283],{}," maps by index to its corresponding data entry.",{"title":301,"searchDepth":302,"depth":302,"links":303},"",2,[304,305,306,307,308,309],{"id":194,"depth":302,"text":195},{"id":207,"depth":302,"text":208},{"id":227,"depth":302,"text":228},{"id":239,"depth":302,"text":240},{"id":251,"depth":302,"text":252},{"id":267,"depth":302,"text":268},"Learn how to customize chart appearance using slots, Cell, and SVG attributes","md",null,{},{"icon":31},{"title":28,"description":310},"ABoOxKXlmZ55BSB6IbO72X067lvbghDQGaESYn_oydI",[318,320],{"title":16,"path":17,"stem":18,"description":319,"icon":19,"children":-1},"How to install vccs and start building charts",{"title":33,"path":34,"stem":35,"description":321,"icon":36,"children":-1},"Control which data point is highlighted in the tooltip",1775929453605]