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