[{"data":1,"prerenderedAt":1366},["ShallowReactive",2],{"navigation_docs":3,"-guide-marks-as-children":60,"-guide-marks-as-children-surround":1361},[4,22,43],{"title":5,"path":6,"stem":7,"children":8,"page":21},"Getting Started","\u002Fgetting-started","1.getting-started",[9,13,17],{"title":10,"path":11,"stem":12},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction",{"title":14,"path":15,"stem":16},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation",{"title":18,"path":19,"stem":20},"Setup","\u002Fgetting-started\u002Fsetup","1.getting-started\u002F3.setup",false,{"title":23,"path":24,"stem":25,"children":26,"page":21},"Guide","\u002Fguide","2.guide",[27,31,35,39],{"title":28,"path":29,"stem":30},"Marks as Children","\u002Fguide\u002Fmarks-as-children","2.guide\u002F1.marks-as-children",{"title":32,"path":33,"stem":34},"Marks as Props","\u002Fguide\u002Fmarks-as-props","2.guide\u002F2.marks-as-props",{"title":36,"path":37,"stem":38},"Reactive Data","\u002Fguide\u002Freactive-data","2.guide\u002F3.reactive-data",{"title":40,"path":41,"stem":42},"Nuxt Integration","\u002Fguide\u002Fnuxt-integration","2.guide\u002F4.nuxt-integration",{"title":44,"path":45,"stem":46,"children":47,"page":21},"Api","\u002Fapi","3.api",[48,52,56],{"title":49,"path":50,"stem":51},"VPlot","\u002Fapi\u002Fvplot","3.api\u002F1.vplot",{"title":53,"path":54,"stem":55},"Mark Components","\u002Fapi\u002Fmark-components","3.api\u002F2.mark-components",{"title":57,"path":58,"stem":59},"TypeScript Types","\u002Fapi\u002Ftypes","3.api\u002F3.types",{"id":61,"title":28,"body":62,"description":1353,"extension":1354,"links":1355,"meta":1356,"navigation":164,"path":29,"seo":1357,"stem":30,"__hash__":1360},"docs\u002F2.guide\u002F1.marks-as-children.md",{"type":63,"value":64,"toc":1343},"minimark",[65,78,83,392,396,399,608,612,615,695,701,705,711,805,822,826,829,1101,1105,1117,1170,1174,1182,1293,1321,1325,1339],[66,67,68,69,73,74,77],"p",{},"Use ",[70,71,72],"code",{},"\u003CPlot*>"," components directly in your Vue template. Each mark from Observable Plot maps to a component with ",[70,75,76],{},"Plot"," prefix and PascalCase naming.",[79,80,82],"h2",{"id":81},"basic-example","Basic example",[84,85,91],"pre",{"className":86,"code":87,"filename":88,"language":89,"meta":90,"style":90},"language-vue shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\u003Cscript setup lang=\"ts\">\nimport { VPlot } from '@memotux\u002Fvue-plot'\n\nconst data = [\n  { name: 'A', value: 10 },\n  { name: 'B', value: 20 },\n  { name: 'C', value: 15 },\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CVPlot :width=\"680\">\n    \u003CPlotBarY :data=\"data\" x=\"name\" y=\"value\" \u002F>\n  \u003C\u002FVPlot>\n\u003C\u002Ftemplate>\n","App.vue","vue","",[70,92,93,129,159,166,182,218,245,272,278,288,293,303,325,373,383],{"__ignoreMap":90},[94,95,98,102,106,110,113,116,120,124,126],"span",{"class":96,"line":97},"line",1,[94,99,101],{"class":100},"s4RQF","\u003C",[94,103,105],{"class":104},"sv6DF","script",[94,107,109],{"class":108},"sWKss"," setup",[94,111,112],{"class":108}," lang",[94,114,115],{"class":100},"=",[94,117,119],{"class":118},"sou9m","\"",[94,121,123],{"class":122},"s9-zz","ts",[94,125,119],{"class":118},[94,127,128],{"class":100},">\n",[94,130,132,136,139,143,146,150,153,156],{"class":96,"line":131},2,[94,133,135],{"class":134},"su7sr","import",[94,137,138],{"class":100}," {",[94,140,142],{"class":141},"sOCQP"," VPlot",[94,144,145],{"class":100}," }",[94,147,149],{"class":148},"seCTJ"," from",[94,151,152],{"class":118}," '",[94,154,155],{"class":122},"@memotux\u002Fvue-plot",[94,157,158],{"class":118},"'\n",[94,160,162],{"class":96,"line":161},3,[94,163,165],{"emptyLinePlaceholder":164},true,"\n",[94,167,169,172,175,178],{"class":96,"line":168},4,[94,170,171],{"class":108},"const",[94,173,174],{"class":141}," data ",[94,176,115],{"class":177},"sqN5v",[94,179,181],{"class":180},"sfkeP"," [\n",[94,183,185,188,192,195,197,200,203,206,209,211,215],{"class":96,"line":184},5,[94,186,187],{"class":100},"  {",[94,189,191],{"class":190},"sNH7Q"," name",[94,193,194],{"class":100},":",[94,196,152],{"class":118},[94,198,199],{"class":122},"A",[94,201,202],{"class":118},"'",[94,204,205],{"class":100},",",[94,207,208],{"class":190}," value",[94,210,194],{"class":100},[94,212,214],{"class":213},"svr3b"," 10",[94,216,217],{"class":100}," },\n",[94,219,221,223,225,227,229,232,234,236,238,240,243],{"class":96,"line":220},6,[94,222,187],{"class":100},[94,224,191],{"class":190},[94,226,194],{"class":100},[94,228,152],{"class":118},[94,230,231],{"class":122},"B",[94,233,202],{"class":118},[94,235,205],{"class":100},[94,237,208],{"class":190},[94,239,194],{"class":100},[94,241,242],{"class":213}," 20",[94,244,217],{"class":100},[94,246,248,250,252,254,256,259,261,263,265,267,270],{"class":96,"line":247},7,[94,249,187],{"class":100},[94,251,191],{"class":190},[94,253,194],{"class":100},[94,255,152],{"class":118},[94,257,258],{"class":122},"C",[94,260,202],{"class":118},[94,262,205],{"class":100},[94,264,208],{"class":190},[94,266,194],{"class":100},[94,268,269],{"class":213}," 15",[94,271,217],{"class":100},[94,273,275],{"class":96,"line":274},8,[94,276,277],{"class":180},"]\n",[94,279,281,284,286],{"class":96,"line":280},9,[94,282,283],{"class":100},"\u003C\u002F",[94,285,105],{"class":104},[94,287,128],{"class":100},[94,289,291],{"class":96,"line":290},10,[94,292,165],{"emptyLinePlaceholder":164},[94,294,296,298,301],{"class":96,"line":295},11,[94,297,101],{"class":100},[94,299,300],{"class":104},"template",[94,302,128],{"class":100},[94,304,306,309,311,314,316,318,321,323],{"class":96,"line":305},12,[94,307,308],{"class":100},"  \u003C",[94,310,49],{"class":104},[94,312,313],{"class":108}," :width",[94,315,115],{"class":100},[94,317,119],{"class":118},[94,319,320],{"class":122},"680",[94,322,119],{"class":118},[94,324,128],{"class":100},[94,326,328,331,334,337,339,341,344,346,349,351,353,356,358,361,363,365,368,370],{"class":96,"line":327},13,[94,329,330],{"class":100},"    \u003C",[94,332,333],{"class":104},"PlotBarY",[94,335,336],{"class":108}," :data",[94,338,115],{"class":100},[94,340,119],{"class":118},[94,342,343],{"class":122},"data",[94,345,119],{"class":118},[94,347,348],{"class":108}," x",[94,350,115],{"class":100},[94,352,119],{"class":118},[94,354,355],{"class":122},"name",[94,357,119],{"class":118},[94,359,360],{"class":108}," y",[94,362,115],{"class":100},[94,364,119],{"class":118},[94,366,367],{"class":122},"value",[94,369,119],{"class":118},[94,371,372],{"class":100}," \u002F>\n",[94,374,376,379,381],{"class":96,"line":375},14,[94,377,378],{"class":100},"  \u003C\u002F",[94,380,49],{"class":104},[94,382,128],{"class":100},[94,384,386,388,390],{"class":96,"line":385},15,[94,387,283],{"class":100},[94,389,300],{"class":104},[94,391,128],{"class":100},[79,393,395],{"id":394},"multiple-marks","Multiple marks",[66,397,398],{},"Stack multiple marks in a single plot:",[84,400,402],{"className":86,"code":401,"filename":88,"language":89,"meta":90,"style":90},"\u003Ctemplate>\n  \u003CVPlot :width=\"680\" :height=\"400\">\n    \u003CPlotBarY :data=\"data\" x=\"name\" y=\"value\" \u002F>\n    \u003CPlotRuleY :data=\"[0]\" stroke=\"gray\" \u002F>\n    \u003CPlotText\n      :data=\"data\"\n      x=\"name\"\n      y=\"value\"\n      dy=\"-8\"\n      textAnchor=\"middle\"\n    \u002F>\n  \u003C\u002FVPlot>\n\u003C\u002Ftemplate>\n",[70,403,404,412,442,480,512,519,533,546,559,573,587,592,600],{"__ignoreMap":90},[94,405,406,408,410],{"class":96,"line":97},[94,407,101],{"class":100},[94,409,300],{"class":104},[94,411,128],{"class":100},[94,413,414,416,418,420,422,424,426,428,431,433,435,438,440],{"class":96,"line":131},[94,415,308],{"class":100},[94,417,49],{"class":104},[94,419,313],{"class":108},[94,421,115],{"class":100},[94,423,119],{"class":118},[94,425,320],{"class":122},[94,427,119],{"class":118},[94,429,430],{"class":108}," :height",[94,432,115],{"class":100},[94,434,119],{"class":118},[94,436,437],{"class":122},"400",[94,439,119],{"class":118},[94,441,128],{"class":100},[94,443,444,446,448,450,452,454,456,458,460,462,464,466,468,470,472,474,476,478],{"class":96,"line":161},[94,445,330],{"class":100},[94,447,333],{"class":104},[94,449,336],{"class":108},[94,451,115],{"class":100},[94,453,119],{"class":118},[94,455,343],{"class":122},[94,457,119],{"class":118},[94,459,348],{"class":108},[94,461,115],{"class":100},[94,463,119],{"class":118},[94,465,355],{"class":122},[94,467,119],{"class":118},[94,469,360],{"class":108},[94,471,115],{"class":100},[94,473,119],{"class":118},[94,475,367],{"class":122},[94,477,119],{"class":118},[94,479,372],{"class":100},[94,481,482,484,487,489,491,493,496,498,501,503,505,508,510],{"class":96,"line":168},[94,483,330],{"class":100},[94,485,486],{"class":104},"PlotRuleY",[94,488,336],{"class":108},[94,490,115],{"class":100},[94,492,119],{"class":118},[94,494,495],{"class":122},"[0]",[94,497,119],{"class":118},[94,499,500],{"class":108}," stroke",[94,502,115],{"class":100},[94,504,119],{"class":118},[94,506,507],{"class":122},"gray",[94,509,119],{"class":118},[94,511,372],{"class":100},[94,513,514,516],{"class":96,"line":184},[94,515,330],{"class":100},[94,517,518],{"class":104},"PlotText\n",[94,520,521,524,526,528,530],{"class":96,"line":220},[94,522,523],{"class":108},"      :data",[94,525,115],{"class":100},[94,527,119],{"class":118},[94,529,343],{"class":122},[94,531,532],{"class":118},"\"\n",[94,534,535,538,540,542,544],{"class":96,"line":247},[94,536,537],{"class":108},"      x",[94,539,115],{"class":100},[94,541,119],{"class":118},[94,543,355],{"class":122},[94,545,532],{"class":118},[94,547,548,551,553,555,557],{"class":96,"line":274},[94,549,550],{"class":108},"      y",[94,552,115],{"class":100},[94,554,119],{"class":118},[94,556,367],{"class":122},[94,558,532],{"class":118},[94,560,561,564,566,568,571],{"class":96,"line":280},[94,562,563],{"class":108},"      dy",[94,565,115],{"class":100},[94,567,119],{"class":118},[94,569,570],{"class":122},"-8",[94,572,532],{"class":118},[94,574,575,578,580,582,585],{"class":96,"line":290},[94,576,577],{"class":108},"      textAnchor",[94,579,115],{"class":100},[94,581,119],{"class":118},[94,583,584],{"class":122},"middle",[94,586,532],{"class":118},[94,588,589],{"class":96,"line":295},[94,590,591],{"class":100},"    \u002F>\n",[94,593,594,596,598],{"class":96,"line":305},[94,595,378],{"class":100},[94,597,49],{"class":104},[94,599,128],{"class":100},[94,601,602,604,606],{"class":96,"line":327},[94,603,283],{"class":100},[94,605,300],{"class":104},[94,607,128],{"class":100},[79,609,611],{"id":610},"mark-naming-convention","Mark naming convention",[66,613,614],{},"The mapping from Observable Plot functions to Vue components follows a consistent pattern:",[616,617,618,631],"table",{},[619,620,621],"thead",{},[622,623,624,628],"tr",{},[625,626,627],"th",{},"Observable Plot function",[625,629,630],{},"Vue Component",[632,633,634,647,659,671,683],"tbody",{},[622,635,636,642],{},[637,638,639],"td",{},[70,640,641],{},"barY()",[637,643,644],{},[70,645,646],{},"\u003CPlotBarY>",[622,648,649,654],{},[637,650,651],{},[70,652,653],{},"dot()",[637,655,656],{},[70,657,658],{},"\u003CPlotDot>",[622,660,661,666],{},[637,662,663],{},[70,664,665],{},"lineX()",[637,667,668],{},[70,669,670],{},"\u003CPlotLineX>",[622,672,673,678],{},[637,674,675],{},[70,676,677],{},"areaY()",[637,679,680],{},[70,681,682],{},"\u003CPlotAreaY>",[622,684,685,690],{},[637,686,687],{},[70,688,689],{},"ruleX()",[637,691,692],{},[70,693,694],{},"\u003CPlotRuleX>",[66,696,697,698,700],{},"The rule: ",[70,699,76],{}," + capitalize the mark name.",[79,702,704],{"id":703},"passing-data","Passing data",[66,706,707,708,710],{},"Each mark component accepts a ",[70,709,343],{}," prop plus all options from its corresponding Observable Plot function:",[84,712,714],{"className":86,"code":713,"filename":88,"language":89,"meta":90,"style":90},"\u003CPlotDot\n  :data=\"scatterData\"\n  x=\"weight\"\n  y=\"height\"\n  r=\"age\"\n  fill=\"blue\"\n  tip\n\u002F>\n",[70,715,716,723,739,753,767,781,795,800],{"__ignoreMap":90},[94,717,718,720],{"class":96,"line":97},[94,719,101],{"class":100},[94,721,722],{"class":104},"PlotDot\n",[94,724,725,728,730,732,734,737],{"class":96,"line":131},[94,726,727],{"class":100},"  :",[94,729,343],{"class":108},[94,731,115],{"class":100},[94,733,119],{"class":118},[94,735,736],{"class":141},"scatterData",[94,738,532],{"class":118},[94,740,741,744,746,748,751],{"class":96,"line":161},[94,742,743],{"class":108},"  x",[94,745,115],{"class":100},[94,747,119],{"class":118},[94,749,750],{"class":122},"weight",[94,752,532],{"class":118},[94,754,755,758,760,762,765],{"class":96,"line":168},[94,756,757],{"class":108},"  y",[94,759,115],{"class":100},[94,761,119],{"class":118},[94,763,764],{"class":122},"height",[94,766,532],{"class":118},[94,768,769,772,774,776,779],{"class":96,"line":184},[94,770,771],{"class":108},"  r",[94,773,115],{"class":100},[94,775,119],{"class":118},[94,777,778],{"class":122},"age",[94,780,532],{"class":118},[94,782,783,786,788,790,793],{"class":96,"line":220},[94,784,785],{"class":108},"  fill",[94,787,115],{"class":100},[94,789,119],{"class":118},[94,791,792],{"class":122},"blue",[94,794,532],{"class":118},[94,796,797],{"class":96,"line":247},[94,798,799],{"class":108},"  tip\n",[94,801,802],{"class":96,"line":274},[94,803,804],{"class":141},"\u002F>\n",[66,806,807,808,810,811,814,815,814,818,821],{},"The ",[70,809,343],{}," prop is separate from the mark options — it's not mixed in with channels like ",[70,812,813],{},"x",", ",[70,816,817],{},"y",[70,819,820],{},"fill",".",[79,823,825],{"id":824},"combining-mark-types","Combining mark types",[66,827,828],{},"Mix different mark types to build complex visualizations:",[84,830,832],{"className":86,"code":831,"filename":88,"language":89,"meta":90,"style":90},"\u003Ctemplate>\n  \u003CVPlot :width=\"680\" :height=\"400\">\n    \u003C!-- Background frame -->\n    \u003CPlotFrame stroke=\"#eee\" \u002F>\n\n    \u003C!-- Data points -->\n    \u003CPlotDot :data=\"points\" x=\"x\" y=\"y\" fill=\"steelblue\" \u002F>\n\n    \u003C!-- Trend line -->\n    \u003CPlotLinearRegressionY\n      :data=\"points\"\n      x=\"x\"\n      y=\"y\"\n      stroke=\"red\"\n      strokeWidth=\"2\"\n    \u002F>\n\n    \u003C!-- Reference line -->\n    \u003CPlotRuleY :data=\"[0]\" stroke=\"#ccc\" \u002F>\n  \u003C\u002FVPlot>\n\u003C\u002Ftemplate>\n",[70,833,834,842,870,876,896,900,905,957,961,966,973,985,997,1009,1023,1037,1042,1047,1053,1083,1092],{"__ignoreMap":90},[94,835,836,838,840],{"class":96,"line":97},[94,837,101],{"class":100},[94,839,300],{"class":104},[94,841,128],{"class":100},[94,843,844,846,848,850,852,854,856,858,860,862,864,866,868],{"class":96,"line":131},[94,845,308],{"class":100},[94,847,49],{"class":104},[94,849,313],{"class":108},[94,851,115],{"class":100},[94,853,119],{"class":118},[94,855,320],{"class":122},[94,857,119],{"class":118},[94,859,430],{"class":108},[94,861,115],{"class":100},[94,863,119],{"class":118},[94,865,437],{"class":122},[94,867,119],{"class":118},[94,869,128],{"class":100},[94,871,872],{"class":96,"line":161},[94,873,875],{"class":874},"snOLt","    \u003C!-- Background frame -->\n",[94,877,878,880,883,885,887,889,892,894],{"class":96,"line":168},[94,879,330],{"class":100},[94,881,882],{"class":104},"PlotFrame",[94,884,500],{"class":108},[94,886,115],{"class":100},[94,888,119],{"class":118},[94,890,891],{"class":122},"#eee",[94,893,119],{"class":118},[94,895,372],{"class":100},[94,897,898],{"class":96,"line":184},[94,899,165],{"emptyLinePlaceholder":164},[94,901,902],{"class":96,"line":220},[94,903,904],{"class":874},"    \u003C!-- Data points -->\n",[94,906,907,909,912,914,916,918,921,923,925,927,929,931,933,935,937,939,941,943,946,948,950,953,955],{"class":96,"line":247},[94,908,330],{"class":100},[94,910,911],{"class":104},"PlotDot",[94,913,336],{"class":108},[94,915,115],{"class":100},[94,917,119],{"class":118},[94,919,920],{"class":122},"points",[94,922,119],{"class":118},[94,924,348],{"class":108},[94,926,115],{"class":100},[94,928,119],{"class":118},[94,930,813],{"class":122},[94,932,119],{"class":118},[94,934,360],{"class":108},[94,936,115],{"class":100},[94,938,119],{"class":118},[94,940,817],{"class":122},[94,942,119],{"class":118},[94,944,945],{"class":108}," fill",[94,947,115],{"class":100},[94,949,119],{"class":118},[94,951,952],{"class":122},"steelblue",[94,954,119],{"class":118},[94,956,372],{"class":100},[94,958,959],{"class":96,"line":274},[94,960,165],{"emptyLinePlaceholder":164},[94,962,963],{"class":96,"line":280},[94,964,965],{"class":874},"    \u003C!-- Trend line -->\n",[94,967,968,970],{"class":96,"line":290},[94,969,330],{"class":100},[94,971,972],{"class":104},"PlotLinearRegressionY\n",[94,974,975,977,979,981,983],{"class":96,"line":295},[94,976,523],{"class":108},[94,978,115],{"class":100},[94,980,119],{"class":118},[94,982,920],{"class":122},[94,984,532],{"class":118},[94,986,987,989,991,993,995],{"class":96,"line":305},[94,988,537],{"class":108},[94,990,115],{"class":100},[94,992,119],{"class":118},[94,994,813],{"class":122},[94,996,532],{"class":118},[94,998,999,1001,1003,1005,1007],{"class":96,"line":327},[94,1000,550],{"class":108},[94,1002,115],{"class":100},[94,1004,119],{"class":118},[94,1006,817],{"class":122},[94,1008,532],{"class":118},[94,1010,1011,1014,1016,1018,1021],{"class":96,"line":375},[94,1012,1013],{"class":108},"      stroke",[94,1015,115],{"class":100},[94,1017,119],{"class":118},[94,1019,1020],{"class":122},"red",[94,1022,532],{"class":118},[94,1024,1025,1028,1030,1032,1035],{"class":96,"line":385},[94,1026,1027],{"class":108},"      strokeWidth",[94,1029,115],{"class":100},[94,1031,119],{"class":118},[94,1033,1034],{"class":122},"2",[94,1036,532],{"class":118},[94,1038,1040],{"class":96,"line":1039},16,[94,1041,591],{"class":100},[94,1043,1045],{"class":96,"line":1044},17,[94,1046,165],{"emptyLinePlaceholder":164},[94,1048,1050],{"class":96,"line":1049},18,[94,1051,1052],{"class":874},"    \u003C!-- Reference line -->\n",[94,1054,1056,1058,1060,1062,1064,1066,1068,1070,1072,1074,1076,1079,1081],{"class":96,"line":1055},19,[94,1057,330],{"class":100},[94,1059,486],{"class":104},[94,1061,336],{"class":108},[94,1063,115],{"class":100},[94,1065,119],{"class":118},[94,1067,495],{"class":122},[94,1069,119],{"class":118},[94,1071,500],{"class":108},[94,1073,115],{"class":100},[94,1075,119],{"class":118},[94,1077,1078],{"class":122},"#ccc",[94,1080,119],{"class":118},[94,1082,372],{"class":100},[94,1084,1086,1088,1090],{"class":96,"line":1085},20,[94,1087,378],{"class":100},[94,1089,49],{"class":104},[94,1091,128],{"class":100},[94,1093,1095,1097,1099],{"class":96,"line":1094},21,[94,1096,283],{"class":100},[94,1098,300],{"class":104},[94,1100,128],{"class":100},[79,1102,1104],{"id":1103},"priority-rule","Priority rule",[66,1106,1107,1108,1112,1113,1116],{},"If marks are provided both as ",[1109,1110,1111],"strong",{},"props"," and as ",[1109,1114,1115],{},"children",", only child marks are rendered:",[84,1118,1120],{"className":86,"code":1119,"filename":88,"language":89,"meta":90,"style":90},"\u003C!-- Only PlotBarY renders — the marks prop is ignored -->\n\u003CVPlot :marks=\"[frame()]\">\n  \u003CPlotBarY :data=\"data\" x=\"name\" y=\"value\" \u002F>\n\u003C\u002FVPlot>\n",[70,1121,1122,1127,1157,1162],{"__ignoreMap":90},[94,1123,1124],{"class":96,"line":97},[94,1125,1126],{"class":874},"\u003C!-- Only PlotBarY renders — the marks prop is ignored -->\n",[94,1128,1129,1131,1133,1136,1139,1141,1143,1146,1150,1153,1155],{"class":96,"line":131},[94,1130,101],{"class":100},[94,1132,49],{"class":104},[94,1134,1135],{"class":100}," :",[94,1137,1138],{"class":108},"marks",[94,1140,115],{"class":100},[94,1142,119],{"class":118},[94,1144,1145],{"class":180},"[",[94,1147,1149],{"class":1148},"sfbsL","frame",[94,1151,1152],{"class":180},"()]",[94,1154,119],{"class":118},[94,1156,128],{"class":100},[94,1158,1159],{"class":96,"line":161},[94,1160,1161],{"class":141},"  \u003CPlotBarY :data=\"data\" x=\"name\" y=\"value\" \u002F>\n",[94,1163,1164,1166,1168],{"class":96,"line":168},[94,1165,283],{"class":100},[94,1167,49],{"class":104},[94,1169,128],{"class":100},[79,1171,1173],{"id":1172},"requirements","Requirements",[66,1175,1176,1177,194],{},"Using mark components as children requires the ",[1178,1179,1181],"a",{"href":1180},"\u002Fgetting-started\u002Fsetup#vite-plugin-configuration","Vite plugin configuration",[84,1183,1187],{"className":1184,"code":1185,"filename":1186,"language":123,"meta":90,"style":90},"language-ts shiki shiki-themes kanagawa-lotus material-theme kanagawa-dragon","\nimport { plotCustomElement } from '@memotux\u002Fvue-plot'\n\nexport default defineConfig({\n  plugins: [\n    vue({\n      template: plotCustomElement.template,\n    }),\n  ],\n})\n","vite.config.ts",[70,1188,1189,1193,1212,1216,1233,1242,1251,1268,1278,1285],{"__ignoreMap":90},[94,1190,1191],{"class":96,"line":97},[94,1192,165],{"emptyLinePlaceholder":164},[94,1194,1195,1197,1199,1202,1204,1206,1208,1210],{"class":96,"line":131},[94,1196,135],{"class":134},[94,1198,138],{"class":100},[94,1200,1201],{"class":141}," plotCustomElement",[94,1203,145],{"class":100},[94,1205,149],{"class":148},[94,1207,152],{"class":118},[94,1209,155],{"class":122},[94,1211,158],{"class":118},[94,1213,1214],{"class":96,"line":161},[94,1215,165],{"emptyLinePlaceholder":164},[94,1217,1218,1221,1224,1227,1230],{"class":96,"line":168},[94,1219,1220],{"class":148},"export",[94,1222,1223],{"class":148}," default",[94,1225,1226],{"class":1148}," defineConfig",[94,1228,1229],{"class":180},"(",[94,1231,1232],{"class":100},"{\n",[94,1234,1235,1238,1240],{"class":96,"line":184},[94,1236,1237],{"class":190},"  plugins",[94,1239,194],{"class":100},[94,1241,181],{"class":180},[94,1243,1244,1247,1249],{"class":96,"line":220},[94,1245,1246],{"class":1148},"    vue",[94,1248,1229],{"class":180},[94,1250,1232],{"class":100},[94,1252,1253,1256,1258,1260,1262,1265],{"class":96,"line":247},[94,1254,1255],{"class":190},"      template",[94,1257,194],{"class":100},[94,1259,1201],{"class":141},[94,1261,821],{"class":100},[94,1263,300],{"class":1264},"smkSw",[94,1266,1267],{"class":100},",\n",[94,1269,1270,1273,1276],{"class":96,"line":274},[94,1271,1272],{"class":100},"    }",[94,1274,1275],{"class":180},")",[94,1277,1267],{"class":100},[94,1279,1280,1283],{"class":96,"line":280},[94,1281,1282],{"class":180},"  ]",[94,1284,1267],{"class":100},[94,1286,1287,1290],{"class":96,"line":290},[94,1288,1289],{"class":100},"}",[94,1291,1292],{"class":180},")\n",[1294,1295,1296,1297,1300,1301,1304,1305,1308,1309,1312,1313,1316,1317,1320],"note",{},"When using camelCase attributes like ",[70,1298,1299],{},"textAnchor"," or ",[70,1302,1303],{},"strokeWidth"," inside a Single-File Component, Vue's compiler maps them correctly. If you instead place these marks directly in a DOM template (e.g. an ",[70,1306,1307],{},"index.html"," ",[70,1310,1311],{},"\u003Cdiv id=\"app\">","), the browser lowercases attribute names and the props won't bind. Prefer SFC usage, or use kebab-case equivalents such as ",[70,1314,1315],{},"text-anchor"," and ",[70,1318,1319],{},"stroke-width"," in DOM templates.",[79,1322,1324],{"id":1323},"whats-next","What's next?",[1326,1327,1328,1334],"ul",{},[1329,1330,1331,1333],"li",{},[1178,1332,32],{"href":33}," — Functional mark definition",[1329,1335,1336,1338],{},[1178,1337,36],{"href":37}," — Update plots dynamically",[1340,1341,1342],"style",{},"html pre.shiki code .s4RQF, html code.shiki .s4RQF{--shiki-light:#4E8CA2;--shiki-default:#89DDFF;--shiki-dark:#9E9B93}html pre.shiki code .sv6DF, html code.shiki .sv6DF{--shiki-light:#77713F;--shiki-default:#F07178;--shiki-dark:#C4B28A}html pre.shiki code .sWKss, html code.shiki .sWKss{--shiki-light:#624C83;--shiki-default:#C792EA;--shiki-dark:#8992A7}html pre.shiki code .sou9m, html code.shiki .sou9m{--shiki-light:#6F894E;--shiki-default:#89DDFF;--shiki-dark:#8A9A7B}html pre.shiki code .s9-zz, html code.shiki .s9-zz{--shiki-light:#6F894E;--shiki-default:#C3E88D;--shiki-dark:#8A9A7B}html pre.shiki code .su7sr, html code.shiki .su7sr{--shiki-light:#CC6D00;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#B6927B;--shiki-dark-font-style:inherit}html pre.shiki code .sOCQP, html code.shiki .sOCQP{--shiki-light:#545464;--shiki-default:#EEFFFF;--shiki-dark:#C5C9C5}html pre.shiki code .seCTJ, html code.shiki .seCTJ{--shiki-light:#624C83;--shiki-light-font-style:inherit;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#8992A7;--shiki-dark-font-style:inherit}html pre.shiki code .sqN5v, html code.shiki .sqN5v{--shiki-light:#77713F;--shiki-default:#89DDFF;--shiki-dark:#C4B28A}html pre.shiki code .sfkeP, html code.shiki .sfkeP{--shiki-light:#4E8CA2;--shiki-default:#EEFFFF;--shiki-dark:#9E9B93}html pre.shiki code .sNH7Q, html code.shiki .sNH7Q{--shiki-light:#545464;--shiki-default:#F07178;--shiki-dark:#C5C9C5}html pre.shiki code .svr3b, html code.shiki .svr3b{--shiki-light:#B35B79;--shiki-default:#F78C6C;--shiki-dark:#A292A3}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 .snOLt, html code.shiki .snOLt{--shiki-light:#716E61;--shiki-light-font-style:inherit;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#737C73;--shiki-dark-font-style:inherit}html pre.shiki code .sfbsL, html code.shiki .sfbsL{--shiki-light:#4D699B;--shiki-default:#82AAFF;--shiki-dark:#8BA4B0}html pre.shiki code .smkSw, html code.shiki .smkSw{--shiki-light:#77713F;--shiki-default:#EEFFFF;--shiki-dark:#C4B28A}",{"title":90,"searchDepth":131,"depth":131,"links":1344},[1345,1346,1347,1348,1349,1350,1351,1352],{"id":81,"depth":131,"text":82},{"id":394,"depth":131,"text":395},{"id":610,"depth":131,"text":611},{"id":703,"depth":131,"text":704},{"id":824,"depth":131,"text":825},{"id":1103,"depth":131,"text":1104},{"id":1172,"depth":131,"text":1173},{"id":1323,"depth":131,"text":1324},"Define Observable Plot marks as Vue template components with the Plot prefix, stack multiple marks, and understand the children-over-props rule.\n","md",null,{},{"title":1358,"description":1359},"Marks as Children — Vue Template Components for Charts","Define marks as \u003CPlotBarY>, \u003CPlotDot>, and other Vue components directly in your template, with a consistent naming convention and priority rules.","XcR_m6tsUpmCgpRfV9mZ0FjkbqdWakfxIUtacTz1zrQ",[1362,1364],{"title":18,"path":19,"stem":20,"description":1363,"children":-1},"Configure the Vite plugin for mark components and register VPlot globally or locally to start building charts in your Vue 3 app.\n",{"title":32,"path":33,"stem":34,"description":1365,"children":-1},"Pass Observable Plot mark functions as props to build charts programmatically, with dynamic mark selection and no Vite plugin required.\n",1787848462538]