[{"data":1,"prerenderedAt":581},["ShallowReactive",2],{"navigation_docs":3,"-charts-composed-chart":172,"-charts-composed-chart-surround":576},[4,21,77,132],{"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],{"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},"Bar Chart","/charts/bar-chart","3.charts/2.bar-chart","i-lucide-bar-chart",{"title":99,"path":100,"stem":101,"icon":102},"Line Chart","/charts/line-chart","3.charts/3.line-chart","i-lucide-trending-up",{"title":104,"path":105,"stem":106,"icon":107},"Pie Chart","/charts/pie-chart","3.charts/4.pie-chart","i-lucide-pie-chart",{"title":109,"path":110,"stem":111,"icon":112},"Radar Chart","/charts/radar-chart","3.charts/5.radar-chart","i-lucide-radar",{"title":114,"path":115,"stem":116,"icon":117},"Radial Bar Chart","/charts/radial-bar-chart","3.charts/6.radial-bar-chart","i-lucide-circle-dot",{"title":119,"path":120,"stem":121,"icon":122},"Scatter Chart","/charts/scatter-chart","3.charts/7.scatter-chart","i-lucide-scatter-chart",{"title":124,"path":125,"stem":126,"icon":127},"Funnel Chart","/charts/funnel-chart","3.charts/8.funnel-chart","i-lucide-filter",{"title":129,"path":130,"stem":131,"icon":56},"Composed Chart","/charts/composed-chart","3.charts/9.composed-chart",{"title":133,"icon":134,"path":135,"stem":136,"children":137,"page":20},"Components","i-lucide-code","/components","4.components",[138,143,148,153,158,162,167],{"title":139,"path":140,"stem":141,"icon":142},"Tooltip","/components/tooltip","4.components/1.tooltip","i-lucide-message-square",{"title":144,"path":145,"stem":146,"icon":147},"Legend","/components/legend","4.components/2.legend","i-lucide-list",{"title":149,"path":150,"stem":151,"icon":152},"CartesianGrid","/components/cartesian-grid","4.components/3.cartesian-grid","i-lucide-grid-3x3",{"title":154,"path":155,"stem":156,"icon":157},"Axes","/components/axis","4.components/4.axis","i-lucide-move",{"title":159,"path":160,"stem":161,"icon":61},"Reference Elements","/components/reference-elements","4.components/5.reference-elements",{"title":163,"path":164,"stem":165,"icon":166},"Text","/components/text","4.components/6.text","i-lucide-type",{"title":168,"path":169,"stem":170,"icon":171},"Customized","/components/customized","4.components/7.customized","i-lucide-pencil-ruler",{"id":173,"title":129,"body":174,"description":569,"extension":570,"links":571,"meta":572,"navigation":573,"path":130,"seo":574,"stem":131,"__hash__":575},"docs/3.charts/9.composed-chart.md",{"type":175,"value":176,"toc":564},"minimark",[177,181,186,189,194,198,221,316,324,328,560],[178,179,180],"p",{},"Composed charts let you mix multiple chart types — Area, Bar, Line, and Scatter — in a single container.",[182,183,185],"h2",{"id":184},"simple-composed-chart","Simple Composed Chart",[178,187,188],{},"A composed chart with Area, Bar, and Line series.",[190,191],"chart-demo",{"description":192,"name":185,"src":193},"Area, Bar, and Line combined in one chart.","composed-charts/simple-composed-chart",[182,195,197],{"id":196},"usage","Usage",[178,199,200,201,205,206,209,210,209,213,216,217,220],{},"Use ",[202,203,204],"code",{},"\u003CComposedChart>"," instead of a specific chart container. Place any combination of ",[202,207,208],{},"\u003CArea>",", ",[202,211,212],{},"\u003CBar>",[202,214,215],{},"\u003CLine>",", or ",[202,218,219],{},"\u003CScatter>"," inside:",[222,223,228],"pre",{"className":224,"code":225,"language":226,"meta":227,"style":227},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CComposedChart :data=\"data\">\n  \u003CCartesianGrid stroke-dasharray=\"3 3\" />\n  \u003CXAxis data-key=\"name\" />\n  \u003CYAxis />\n  \u003CTooltip />\n  \u003CArea data-key=\"amt\" fill=\"#f97316\" stroke=\"#f97316\" :fill-opacity=\"0.3\" />\n  \u003CBar data-key=\"pv\" fill=\"#14b8a6\" :bar-size=\"20\" />\n  \u003CLine data-key=\"uv\" stroke=\"#f59e0b\" />\n\u003C/ComposedChart>\n","vue","",[202,229,230,264,270,276,282,288,294,300,306],{"__ignoreMap":227},[231,232,235,239,243,246,250,253,256,259,261],"span",{"class":233,"line":234},"line",1,[231,236,238],{"class":237},"sMK4o","\u003C",[231,240,242],{"class":241},"swJcz","ComposedChart",[231,244,245],{"class":237}," :",[231,247,249],{"class":248},"spNyl","data",[231,251,252],{"class":237},"=",[231,254,255],{"class":237},"\"",[231,257,249],{"class":258},"sTEyZ",[231,260,255],{"class":237},[231,262,263],{"class":237},">\n",[231,265,267],{"class":233,"line":266},2,[231,268,269],{"class":258},"  \u003CCartesianGrid stroke-dasharray=\"3 3\" />\n",[231,271,273],{"class":233,"line":272},3,[231,274,275],{"class":258},"  \u003CXAxis data-key=\"name\" />\n",[231,277,279],{"class":233,"line":278},4,[231,280,281],{"class":258},"  \u003CYAxis />\n",[231,283,285],{"class":233,"line":284},5,[231,286,287],{"class":258},"  \u003CTooltip />\n",[231,289,291],{"class":233,"line":290},6,[231,292,293],{"class":258},"  \u003CArea data-key=\"amt\" fill=\"#f97316\" stroke=\"#f97316\" :fill-opacity=\"0.3\" />\n",[231,295,297],{"class":233,"line":296},7,[231,298,299],{"class":258},"  \u003CBar data-key=\"pv\" fill=\"#14b8a6\" :bar-size=\"20\" />\n",[231,301,303],{"class":233,"line":302},8,[231,304,305],{"class":258},"  \u003CLine data-key=\"uv\" stroke=\"#f59e0b\" />\n",[231,307,309,312,314],{"class":233,"line":308},9,[231,310,311],{"class":237},"\u003C/",[231,313,242],{"class":241},[231,315,263],{"class":237},[178,317,318,319,323],{},"The rendering order follows the template order — elements declared later render on top. See the ",[320,321,322],"a",{"href":54},"Z-Order and Layers"," guide for details.",[182,325,327],{"id":326},"composedchart-props","ComposedChart props",[329,330,331,350],"table",{},[332,333,334],"thead",{},[335,336,337,341,344,347],"tr",{},[338,339,340],"th",{},"Prop",[338,342,343],{},"Type",[338,345,346],{},"Default",[338,348,349],{},"Description",[351,352,353,373,395,411,431,451,468,485,505,524,540],"tbody",{},[335,354,355,360,365,370],{},[356,357,358],"td",{},[202,359,249],{},[356,361,362],{},[202,363,364],{},"Array",[356,366,367],{},[202,368,369],{},"[]",[356,371,372],{},"Data array for the chart",[335,374,375,380,385,388],{},[356,376,377],{},[202,378,379],{},"width",[356,381,382],{},[202,383,384],{},"number",[356,386,387],{},"—",[356,389,390,391,394],{},"Chart width (use ",[202,392,393],{},"ResponsiveContainer"," for responsive)",[335,396,397,402,406,408],{},[356,398,399],{},[202,400,401],{},"height",[356,403,404],{},[202,405,384],{},[356,407,387],{},[356,409,410],{},"Chart height",[335,412,413,418,423,428],{},[356,414,415],{},[202,416,417],{},"margin",[356,419,420],{},[202,421,422],{},"object",[356,424,425],{},[202,426,427],{},"{ top: 5, right: 5, bottom: 5, left: 5 }",[356,429,430],{},"Chart margins",[335,432,433,438,443,448],{},[356,434,435],{},[202,436,437],{},"layout",[356,439,440],{},[202,441,442],{},"'horizontal' | 'vertical'",[356,444,445],{},[202,446,447],{},"'horizontal'",[356,449,450],{},"Layout direction",[335,452,453,458,463,465],{},[356,454,455],{},[202,456,457],{},"syncId",[356,459,460],{},[202,461,462],{},"string",[356,464,387],{},[356,466,467],{},"Sync hover across charts with same ID",[335,469,470,475,480,482],{},[356,471,472],{},[202,473,474],{},"syncMethod",[356,476,477],{},[202,478,479],{},"'index' | 'value'",[356,481,387],{},[356,483,484],{},"How synced charts align tooltips",[335,486,487,492,497,502],{},[356,488,489],{},[202,490,491],{},"barGap",[356,493,494],{},[202,495,496],{},"number | string",[356,498,499],{},[202,500,501],{},"'4'",[356,503,504],{},"Gap between bars in the same category",[335,506,507,512,516,521],{},[356,508,509],{},[202,510,511],{},"barCategoryGap",[356,513,514],{},[202,515,496],{},[356,517,518],{},[202,519,520],{},"'10%'",[356,522,523],{},"Gap between bar categories",[335,525,526,531,535,537],{},[356,527,528],{},[202,529,530],{},"barSize",[356,532,533],{},[202,534,384],{},[356,536,387],{},[356,538,539],{},"Default bar width",[335,541,542,547,551,553],{},[356,543,544],{},[202,545,546],{},"stack-offset",[356,548,549],{},[202,550,462],{},[356,552,387],{},[356,554,555,556,559],{},"Stack offset type (",[202,557,558],{},"expand"," for 100% stacked)",[561,562,563],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":227,"searchDepth":266,"depth":266,"links":565},[566,567,568],{"id":184,"depth":266,"text":185},{"id":196,"depth":266,"text":197},{"id":326,"depth":266,"text":327},"Combine Area, Bar, and Line series in a single chart","md",null,{},{"icon":56},{"title":129,"description":569},"2cRBGo_XaLhU8Vu9ZjnVol-FAA-DtA28W13aP7T9fAk",[577,579],{"title":124,"path":125,"stem":126,"description":578,"icon":127,"children":-1},"Build funnel charts for conversion and drop-off visualization",{"title":139,"path":140,"stem":141,"description":580,"icon":142,"children":-1},"Configure tooltips for displaying data on hover",1775472914508]