[{"data":1,"prerenderedAt":806},["ShallowReactive",2],{"navigation_docs":3,"-charts-scatter-chart":172,"-charts-scatter-chart-surround":801},[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":119,"body":174,"description":794,"extension":795,"links":796,"meta":797,"navigation":798,"path":120,"seo":799,"stem":121,"__hash__":800},"docs/3.charts/7.scatter-chart.md",{"type":175,"value":176,"toc":787},"minimark",[177,181,186,189,194,198,210,270,277,336,340,420,424,621,625,783],[178,179,180],"p",{},"Scatter charts display individual data points on a two-dimensional plane, useful for showing relationships between variables.",[182,183,185],"h2",{"id":184},"simple-scatter-chart","Simple Scatter Chart",[178,187,188],{},"A scatter chart with two data series and a size axis.",[190,191],"chart-demo",{"description":192,"name":185,"src":193},"Two scatter series with Z-axis sizing.","scatter-charts/simple-scatter-chart",[182,195,197],{"id":196},"usage","Usage",[178,199,200,201,205,206,209],{},"Each ",[202,203,204],"code",{},"\u003CScatter>"," receives its own ",[202,207,208],{},"data"," array (unlike other chart types where data is on the chart container):",[211,212,217],"pre",{"className":213,"code":214,"language":215,"meta":216,"style":216},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003CScatterChart>\n  \u003CXAxis data-key=\"x\" type=\"number\" />\n  \u003CYAxis data-key=\"y\" type=\"number\" />\n  \u003CScatter name=\"Series A\" :data=\"data01\" fill=\"#8884d8\" />\n  \u003CScatter name=\"Series B\" :data=\"data02\" fill=\"#82ca9d\" />\n\u003C/ScatterChart>\n","vue","",[202,218,219,235,242,248,254,260],{"__ignoreMap":216},[220,221,224,228,232],"span",{"class":222,"line":223},"line",1,[220,225,227],{"class":226},"sMK4o","\u003C",[220,229,231],{"class":230},"swJcz","ScatterChart",[220,233,234],{"class":226},">\n",[220,236,238],{"class":222,"line":237},2,[220,239,241],{"class":240},"sTEyZ","  \u003CXAxis data-key=\"x\" type=\"number\" />\n",[220,243,245],{"class":222,"line":244},3,[220,246,247],{"class":240},"  \u003CYAxis data-key=\"y\" type=\"number\" />\n",[220,249,251],{"class":222,"line":250},4,[220,252,253],{"class":240},"  \u003CScatter name=\"Series A\" :data=\"data01\" fill=\"#8884d8\" />\n",[220,255,257],{"class":222,"line":256},5,[220,258,259],{"class":240},"  \u003CScatter name=\"Series B\" :data=\"data02\" fill=\"#82ca9d\" />\n",[220,261,263,266,268],{"class":222,"line":262},6,[220,264,265],{"class":226},"\u003C/",[220,267,231],{"class":230},[220,269,234],{"class":226},[178,271,272,273,276],{},"Use ",[202,274,275],{},"\u003CZAxis>"," to map a third dimension to dot size:",[211,278,280],{"className":213,"code":279,"language":215,"meta":216,"style":216},"\u003CZAxis data-key=\"z\" :range=\"[60, 400]\" />\n",[202,281,282],{"__ignoreMap":216},[220,283,284,286,289,293,296,299,303,305,308,311,313,315,318,322,325,328,331,333],{"class":222,"line":223},[220,285,227],{"class":226},[220,287,288],{"class":230},"ZAxis",[220,290,292],{"class":291},"spNyl"," data-key",[220,294,295],{"class":226},"=",[220,297,298],{"class":226},"\"",[220,300,302],{"class":301},"sfazB","z",[220,304,298],{"class":226},[220,306,307],{"class":226}," :",[220,309,310],{"class":291},"range",[220,312,295],{"class":226},[220,314,298],{"class":226},[220,316,317],{"class":240},"[",[220,319,321],{"class":320},"sbssI","60",[220,323,324],{"class":226},",",[220,326,327],{"class":320}," 400",[220,329,330],{"class":240},"]",[220,332,298],{"class":226},[220,334,335],{"class":226}," />\n",[182,337,339],{"id":338},"scatterchart-props","ScatterChart props",[341,342,343,362],"table",{},[344,345,346],"thead",{},[347,348,349,353,356,359],"tr",{},[350,351,352],"th",{},"Prop",[350,354,355],{},"Type",[350,357,358],{},"Default",[350,360,361],{},"Description",[363,364,365,384,400],"tbody",{},[347,366,367,373,378,381],{},[368,369,370],"td",{},[202,371,372],{},"width",[368,374,375],{},[202,376,377],{},"number",[368,379,380],{},"—",[368,382,383],{},"Chart width",[347,385,386,391,395,397],{},[368,387,388],{},[202,389,390],{},"height",[368,392,393],{},[202,394,377],{},[368,396,380],{},[368,398,399],{},"Chart height",[347,401,402,407,412,417],{},[368,403,404],{},[202,405,406],{},"layout",[368,408,409],{},[202,410,411],{},"'horizontal' | 'vertical'",[368,413,414],{},[202,415,416],{},"'horizontal'",[368,418,419],{},"Layout direction",[182,421,423],{"id":422},"scatter-props","Scatter props",[341,425,426,438],{},[344,427,428],{},[347,429,430,432,434,436],{},[350,431,352],{},[350,433,355],{},[350,435,358],{},[350,437,361],{},[363,439,440,456,473,490,506,525,567,585,604],{},[347,441,442,446,451,453],{},[368,443,444],{},[202,445,208],{},[368,447,448],{},[202,449,450],{},"Array",[368,452,380],{},[368,454,455],{},"Data array for this scatter series",[347,457,458,463,468,470],{},[368,459,460],{},[202,461,462],{},"dataKey",[368,464,465],{},[202,466,467],{},"string | number | Function",[368,469,380],{},[368,471,472],{},"Key for Y values",[347,474,475,480,485,487],{},[368,476,477],{},[202,478,479],{},"name",[368,481,482],{},[202,483,484],{},"string",[368,486,380],{},[368,488,489],{},"Name for legend/tooltip",[347,491,492,497,501,503],{},[368,493,494],{},[202,495,496],{},"fill",[368,498,499],{},[202,500,484],{},[368,502,380],{},[368,504,505],{},"Dot fill color",[347,507,508,512,517,522],{},[368,509,510],{},[202,511,222],{},[368,513,514],{},[202,515,516],{},"boolean",[368,518,519],{},[202,520,521],{},"false",[368,523,524],{},"Connect dots with a line",[347,526,527,532,536,541],{},[368,528,529],{},[202,530,531],{},"shape",[368,533,534],{},[202,535,484],{},[368,537,538],{},[202,539,540],{},"'circle'",[368,542,543,544,547,548,547,551,547,554,547,557,547,560,547,563,566],{},"Dot shape (",[202,545,546],{},"circle",", ",[202,549,550],{},"cross",[202,552,553],{},"diamond",[202,555,556],{},"square",[202,558,559],{},"star",[202,561,562],{},"triangle",[202,564,565],{},"wye",")",[347,568,569,574,578,582],{},[368,570,571],{},[202,572,573],{},"hide",[368,575,576],{},[202,577,516],{},[368,579,580],{},[202,581,521],{},[368,583,584],{},"Hide the scatter",[347,586,587,592,596,601],{},[368,588,589],{},[202,590,591],{},"isAnimationActive",[368,593,594],{},[202,595,516],{},[368,597,598],{},[202,599,600],{},"true",[368,602,603],{},"Enable animation",[347,605,606,611,616,618],{},[368,607,608],{},[202,609,610],{},"transition",[368,612,613],{},[202,614,615],{},"AnimationOptions",[368,617,380],{},[368,619,620],{},"Animation timing (motion-v)",[182,622,624],{"id":623},"zaxis-props","ZAxis props",[341,626,627,639],{},[344,628,629],{},[347,630,631,633,635,637],{},[350,632,352],{},[350,634,355],{},[350,636,358],{},[350,638,361],{},[363,640,641,661,676,696,715,732,752,767],{},[347,642,643,648,653,658],{},[368,644,645],{},[202,646,647],{},"zAxisId",[368,649,650],{},[202,651,652],{},"string | number",[368,654,655],{},[202,656,657],{},"0",[368,659,660],{},"Unique ID for the Z axis",[347,662,663,667,671,673],{},[368,664,665],{},[202,666,462],{},[368,668,669],{},[202,670,467],{},[368,672,380],{},[368,674,675],{},"Key for Z values",[347,677,678,683,688,693],{},[368,679,680],{},[202,681,682],{},"type",[368,684,685],{},[202,686,687],{},"'number' | 'category'",[368,689,690],{},[202,691,692],{},"'number'",[368,694,695],{},"Axis data type",[347,697,698,702,707,712],{},[368,699,700],{},[202,701,310],{},[368,703,704],{},[202,705,706],{},"[number, number]",[368,708,709],{},[202,710,711],{},"[64, 64]",[368,713,714],{},"Min and max dot size",[347,716,717,722,727,729],{},[368,718,719],{},[202,720,721],{},"domain",[368,723,724],{},[202,725,726],{},"AxisDomain",[368,728,380],{},[368,730,731],{},"Custom domain for the axis",[347,733,734,739,744,749],{},[368,735,736],{},[202,737,738],{},"scale",[368,740,741],{},[202,742,743],{},"string | Function",[368,745,746],{},[202,747,748],{},"'auto'",[368,750,751],{},"D3 scale type",[347,753,754,758,762,764],{},[368,755,756],{},[202,757,479],{},[368,759,760],{},[202,761,484],{},[368,763,380],{},[368,765,766],{},"Axis name for tooltip display",[347,768,769,774,778,780],{},[368,770,771],{},[202,772,773],{},"unit",[368,775,776],{},[202,777,484],{},[368,779,380],{},[368,781,782],{},"Unit string appended to values",[784,785,786],"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 .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);}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":216,"searchDepth":237,"depth":237,"links":788},[789,790,791,792,793],{"id":184,"depth":237,"text":185},{"id":196,"depth":237,"text":197},{"id":338,"depth":237,"text":339},{"id":422,"depth":237,"text":423},{"id":623,"depth":237,"text":624},"Plot data points on an X-Y plane to visualize relationships","md",null,{},{"icon":122},{"title":119,"description":794},"P4ZwcHLvR0kDcDKbqexJrDFvrbtrFCtXGxtQtXSj8zA",[802,804],{"title":114,"path":115,"stem":116,"description":803,"icon":117,"children":-1},"Build radial bar charts for circular progress and comparison",{"title":124,"path":125,"stem":126,"description":805,"icon":127,"children":-1},"Build funnel charts for conversion and drop-off visualization",1775472914492]