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