[{"data":1,"prerenderedAt":1339},["ShallowReactive",2],{"navigation_docs":3,"-components-brush":284,"-components-brush-surround":1334},[4,31,117,216],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20,25],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Migrate from 0.6","\u002Fgetting-started\u002Fmigration","1.getting-started\u002F3.migration","i-lucide-arrow-up-circle",{"title":26,"path":27,"stem":28,"icon":29},"Why vccs","\u002Fgetting-started\u002Fwhy-vccs","1.getting-started\u002F4.why-vccs","i-lucide-scale",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"Guides","i-lucide-book-open","\u002Fguides","2.guides",[37,42,47,52,57,62,67,72,77,82,87,92,97,102,107,112],{"title":38,"path":39,"stem":40,"icon":41},"Customize","\u002Fguides\u002Fcustomize","2.guides\u002F01.customize","i-lucide-paintbrush",{"title":43,"path":44,"stem":45,"icon":46},"Axis Domain and Ticks","\u002Fguides\u002Faxis-domain-and-ticks","2.guides\u002F03.axis-domain-and-ticks","i-lucide-ruler",{"title":48,"path":49,"stem":50,"icon":51},"Chart Size","\u002Fguides\u002Fchart-size","2.guides\u002F05.chart-size","i-lucide-maximize",{"title":53,"path":54,"stem":55,"icon":56},"Z-Order and Layers","\u002Fguides\u002Fz-order-and-layers","2.guides\u002F06.z-order-and-layers","i-lucide-layers",{"title":58,"path":59,"stem":60,"icon":61},"Coordinate Systems","\u002Fguides\u002Fcoordinate-systems","2.guides\u002F07.coordinate-systems","i-lucide-crosshair",{"title":63,"path":64,"stem":65,"icon":66},"Performance","\u002Fguides\u002Fperformance","2.guides\u002F08.performance","i-lucide-zap",{"title":68,"path":69,"stem":70,"icon":71},"Rounded Bar Corners","\u002Fguides\u002Frounded-bar-corners","2.guides\u002F09.rounded-bar-corners","i-lucide-square",{"title":73,"path":74,"stem":75,"icon":76},"Bar Alignment","\u002Fguides\u002Fbar-alignment","2.guides\u002F10.bar-alignment","i-lucide-align-center",{"title":78,"path":79,"stem":80,"icon":81},"Nuxt and SSR","\u002Fguides\u002Fnuxt-and-ssr","2.guides\u002F11.nuxt-and-ssr","i-lucide-server",{"title":83,"path":84,"stem":85,"icon":86},"Animation","\u002Fguides\u002Fanimation","2.guides\u002F12.animation","i-lucide-sparkles",{"title":88,"path":89,"stem":90,"icon":91},"Events and v-model","\u002Fguides\u002Fevents-and-models","2.guides\u002F13.events-and-models","i-lucide-mouse-pointer-click",{"title":93,"path":94,"stem":95,"icon":96},"TypeScript","\u002Fguides\u002Ftypescript","2.guides\u002F14.typescript","i-lucide-file-code",{"title":98,"path":99,"stem":100,"icon":101},"Theming and dark mode","\u002Fguides\u002Ftheming","2.guides\u002F15.theming","i-lucide-palette",{"title":103,"path":104,"stem":105,"icon":106},"shadcn-vue","\u002Fguides\u002Fshadcn-vue","2.guides\u002F16.shadcn-vue","i-lucide-component",{"title":108,"path":109,"stem":110,"icon":111},"Dashboard recipes","\u002Fguides\u002Fdashboard-recipes","2.guides\u002F17.dashboard-recipes","i-lucide-layout-dashboard",{"title":113,"path":114,"stem":115,"icon":116},"Accessibility","\u002Fguides\u002Faccessibility","2.guides\u002F18.accessibility","i-lucide-accessibility",{"title":118,"icon":119,"path":120,"stem":121,"children":122,"page":30},"Charts","i-lucide-bar-chart-3","\u002Fcharts","3.charts",[123,128,133,138,143,148,153,158,163,168,172,177,182,187,192,197,202,206,211],{"title":124,"path":125,"stem":126,"icon":127},"Chart Containers","\u002Fcharts\u002Fchart-containers","3.charts\u002F0.chart-containers","i-lucide-box",{"title":129,"path":130,"stem":131,"icon":132},"Area Chart","\u002Fcharts\u002Farea-chart","3.charts\u002F01.area-chart","i-lucide-area-chart",{"title":134,"path":135,"stem":136,"icon":137},"Bar Chart","\u002Fcharts\u002Fbar-chart","3.charts\u002F02.bar-chart","i-lucide-bar-chart",{"title":139,"path":140,"stem":141,"icon":142},"Line Chart","\u002Fcharts\u002Fline-chart","3.charts\u002F03.line-chart","i-lucide-trending-up",{"title":144,"path":145,"stem":146,"icon":147},"Pie Chart","\u002Fcharts\u002Fpie-chart","3.charts\u002F04.pie-chart","i-lucide-pie-chart",{"title":149,"path":150,"stem":151,"icon":152},"Radar Chart","\u002Fcharts\u002Fradar-chart","3.charts\u002F05.radar-chart","i-lucide-radar",{"title":154,"path":155,"stem":156,"icon":157},"Radial Bar Chart","\u002Fcharts\u002Fradial-bar-chart","3.charts\u002F06.radial-bar-chart","i-lucide-circle-dot",{"title":159,"path":160,"stem":161,"icon":162},"Scatter Chart","\u002Fcharts\u002Fscatter-chart","3.charts\u002F07.scatter-chart","i-lucide-scatter-chart",{"title":164,"path":165,"stem":166,"icon":167},"Funnel Chart","\u002Fcharts\u002Ffunnel-chart","3.charts\u002F08.funnel-chart","i-lucide-filter",{"title":169,"path":170,"stem":171,"icon":56},"Composed Chart","\u002Fcharts\u002Fcomposed-chart","3.charts\u002F09.composed-chart",{"title":173,"path":174,"stem":175,"icon":176},"Treemap","\u002Fcharts\u002Ftreemap","3.charts\u002F10.treemap","i-lucide-layout-grid",{"title":178,"path":179,"stem":180,"icon":181},"Sunburst Chart","\u002Fcharts\u002Fsunburst-chart","3.charts\u002F11.sunburst-chart","i-lucide-sun",{"title":183,"path":184,"stem":185,"icon":186},"Sankey","\u002Fcharts\u002Fsankey","3.charts\u002F12.sankey","i-lucide-git-fork",{"title":188,"path":189,"stem":190,"icon":191},"Tracker","\u002Fcharts\u002Ftracker","3.charts\u002F13.tracker","i-lucide-activity",{"title":193,"path":194,"stem":195,"icon":196},"Calendar Heatmap","\u002Fcharts\u002Fcalendar-heatmap","3.charts\u002F14.calendar-heatmap","i-lucide-calendar-days",{"title":198,"path":199,"stem":200,"icon":201},"Heatmap and CohortChart","\u002Fcharts\u002Fheatmap","3.charts\u002F15.heatmap","i-lucide-grid-3x3",{"title":203,"path":204,"stem":205,"icon":142},"Sparkline","\u002Fcharts\u002Fsparkline","3.charts\u002F16.sparkline",{"title":207,"path":208,"stem":209,"icon":210},"Bar List","\u002Fcharts\u002Fbar-list","3.charts\u002F17.bar-list","i-lucide-list-ordered",{"title":212,"path":213,"stem":214,"icon":215},"Journey Sankey","\u002Fcharts\u002Fjourney-sankey","3.charts\u002F18.journey-sankey","i-lucide-split",{"title":217,"icon":218,"path":219,"stem":220,"children":221,"page":30},"Components","i-lucide-code","\u002Fcomponents","4.components",[222,227,232,236,241,245,250,254,259,264,269,274,279],{"title":223,"path":224,"stem":225,"icon":226},"Tooltip","\u002Fcomponents\u002Ftooltip","4.components\u002F01.tooltip","i-lucide-message-square",{"title":228,"path":229,"stem":230,"icon":231},"Legend","\u002Fcomponents\u002Flegend","4.components\u002F02.legend","i-lucide-list",{"title":233,"path":234,"stem":235,"icon":201},"CartesianGrid","\u002Fcomponents\u002Fcartesian-grid","4.components\u002F03.cartesian-grid",{"title":237,"path":238,"stem":239,"icon":240},"Axes","\u002Fcomponents\u002Faxis","4.components\u002F04.axis","i-lucide-move",{"title":242,"path":243,"stem":244,"icon":152},"Polar Axes and Grid","\u002Fcomponents\u002Fpolar-axes","4.components\u002F05.polar-axes",{"title":246,"path":247,"stem":248,"icon":249},"Brush","\u002Fcomponents\u002Fbrush","4.components\u002F06.brush","i-lucide-sliders-horizontal",{"title":251,"path":252,"stem":253,"icon":61},"Reference Elements","\u002Fcomponents\u002Freference-elements","4.components\u002F07.reference-elements",{"title":255,"path":256,"stem":257,"icon":258},"ErrorBar","\u002Fcomponents\u002Ferror-bar","4.components\u002F08.error-bar","i-lucide-chevrons-up-down",{"title":260,"path":261,"stem":262,"icon":263},"Labels and Cell","\u002Fcomponents\u002Flabels","4.components\u002F09.labels","i-lucide-tag",{"title":265,"path":266,"stem":267,"icon":268},"Text","\u002Fcomponents\u002Ftext","4.components\u002F10.text","i-lucide-type",{"title":270,"path":271,"stem":272,"icon":273},"Shapes","\u002Fcomponents\u002Fshapes","4.components\u002F11.shapes","i-lucide-shapes",{"title":275,"path":276,"stem":277,"icon":278},"Composables","\u002Fcomponents\u002Fcomposables","4.components\u002F12.composables","i-lucide-function-square",{"title":280,"path":281,"stem":282,"icon":283},"Custom overlays","\u002Fcomponents\u002Fcustom-overlays","4.components\u002F13.custom-overlays","i-lucide-pencil-ruler",{"id":285,"title":246,"body":286,"description":1327,"extension":1328,"links":1329,"meta":1330,"navigation":1331,"path":247,"seo":1332,"stem":248,"__hash__":1333},"docs\u002F4.components\u002F06.brush.md",{"type":287,"value":288,"toc":1317},"minimark",[289,297,302,309,315,334,338,722,729,766,770,773,799,808,817,820,824,1150,1165,1169,1227,1231,1266,1270,1295,1299,1313],[290,291,292,296],"p",{},[293,294,295],"code",{},"\u003CBrush>"," adds a range selector below a cartesian chart. The chart shows only the rows inside the selected window. Drag a traveller to resize the window, or drag the window to move it.",[298,299,301],"h2",{"id":300},"brush-with-a-panorama","Brush with a panorama",[290,303,304,305,308],{},"Put a small chart in the Brush's default slot to show the whole series behind the window. Drag the handles: the text below the chart follows ",[293,306,307],{},"v-model:range",".",[310,311],"chart-demo",{"description":312,"name":313,"src":314},"30 days of orders. The area chart in the brush shows all days.","Brush with Panorama","brush-charts\u002Fpanorama-brush-chart",[290,316,317,318,321,322,325,326,329,330,333],{},"The panorama chart gets the parent's ",[293,319,320],{},"data",", size and position from the Brush, so it needs only its series. Put exactly one chart in the slot (",[293,323,324],{},"AreaChart",", ",[293,327,328],{},"LineChart"," or ",[293,331,332],{},"BarChart","); the Brush ignores the slot otherwise.",[298,335,337],{"id":336},"control-the-range","Control the range",[339,340,345],"pre",{"className":341,"code":342,"language":343,"meta":344,"style":344},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport type { BrushStartEndIndex } from 'vccs'\nimport { Bar, BarChart, Brush, XAxis } from 'vccs'\n\nconst range = ref\u003CBrushStartEndIndex | null>({ startIndex: 0, endIndex: 5 })\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CBarChart\n    :data=\"data\"\n    :height=\"300\"\n  >\n    \u003CXAxis data-key=\"name\" \u002F>\n    \u003CBar data-key=\"value\" \u002F>\n    \u003CBrush\n      v-model:range=\"range\"\n      data-key=\"name\"\n    \u002F>\n  \u003C\u002FBarChart>\n\u003C\u002Ftemplate>\n","vue","",[293,346,347,382,410,434,470,477,537,547,552,562,571,588,605,611,635,656,664,683,697,703,713],{"__ignoreMap":344},[348,349,352,356,360,364,367,370,373,377,379],"span",{"class":350,"line":351},"line",1,[348,353,355],{"class":354},"sMK4o","\u003C",[348,357,359],{"class":358},"swJcz","script",[348,361,363],{"class":362},"spNyl"," setup",[348,365,366],{"class":362}," lang",[348,368,369],{"class":354},"=",[348,371,372],{"class":354},"\"",[348,374,376],{"class":375},"sfazB","ts",[348,378,372],{"class":354},[348,380,381],{"class":354},">\n",[348,383,385,389,392,396,399,402,405,407],{"class":350,"line":384},2,[348,386,388],{"class":387},"s7zQu","import",[348,390,391],{"class":354}," {",[348,393,395],{"class":394},"sTEyZ"," ref",[348,397,398],{"class":354}," }",[348,400,401],{"class":387}," from",[348,403,404],{"class":354}," '",[348,406,343],{"class":375},[348,408,409],{"class":354},"'\n",[348,411,413,415,418,420,423,425,427,429,432],{"class":350,"line":412},3,[348,414,388],{"class":387},[348,416,417],{"class":387}," type",[348,419,391],{"class":354},[348,421,422],{"class":394}," BrushStartEndIndex",[348,424,398],{"class":354},[348,426,401],{"class":387},[348,428,404],{"class":354},[348,430,431],{"class":375},"vccs",[348,433,409],{"class":354},[348,435,437,439,441,444,447,450,452,455,457,460,462,464,466,468],{"class":350,"line":436},4,[348,438,388],{"class":387},[348,440,391],{"class":354},[348,442,443],{"class":394}," Bar",[348,445,446],{"class":354},",",[348,448,449],{"class":394}," BarChart",[348,451,446],{"class":354},[348,453,454],{"class":394}," Brush",[348,456,446],{"class":354},[348,458,459],{"class":394}," XAxis",[348,461,398],{"class":354},[348,463,401],{"class":387},[348,465,404],{"class":354},[348,467,431],{"class":375},[348,469,409],{"class":354},[348,471,473],{"class":350,"line":472},5,[348,474,476],{"emptyLinePlaceholder":475},true,"\n",[348,478,480,483,486,488,491,493,497,500,503,506,509,512,515,518,522,524,527,529,532,534],{"class":350,"line":479},6,[348,481,482],{"class":362},"const",[348,484,485],{"class":394}," range ",[348,487,369],{"class":354},[348,489,395],{"class":490},"s2Zo4",[348,492,355],{"class":354},[348,494,496],{"class":495},"sBMFI","BrushStartEndIndex",[348,498,499],{"class":354}," |",[348,501,502],{"class":495}," null",[348,504,505],{"class":354},">",[348,507,508],{"class":394},"(",[348,510,511],{"class":354},"{",[348,513,514],{"class":358}," startIndex",[348,516,517],{"class":354},":",[348,519,521],{"class":520},"sbssI"," 0",[348,523,446],{"class":354},[348,525,526],{"class":358}," endIndex",[348,528,517],{"class":354},[348,530,531],{"class":520}," 5",[348,533,398],{"class":354},[348,535,536],{"class":394},")\n",[348,538,540,543,545],{"class":350,"line":539},7,[348,541,542],{"class":354},"\u003C\u002F",[348,544,359],{"class":358},[348,546,381],{"class":354},[348,548,550],{"class":350,"line":549},8,[348,551,476],{"emptyLinePlaceholder":475},[348,553,555,557,560],{"class":350,"line":554},9,[348,556,355],{"class":354},[348,558,559],{"class":358},"template",[348,561,381],{"class":354},[348,563,565,568],{"class":350,"line":564},10,[348,566,567],{"class":354},"  \u003C",[348,569,570],{"class":358},"BarChart\n",[348,572,574,577,579,581,583,585],{"class":350,"line":573},11,[348,575,576],{"class":354},"    :",[348,578,320],{"class":362},[348,580,369],{"class":354},[348,582,372],{"class":354},[348,584,320],{"class":394},[348,586,587],{"class":354},"\"\n",[348,589,591,593,596,598,600,603],{"class":350,"line":590},12,[348,592,576],{"class":354},[348,594,595],{"class":362},"height",[348,597,369],{"class":354},[348,599,372],{"class":354},[348,601,602],{"class":520},"300",[348,604,587],{"class":354},[348,606,608],{"class":350,"line":607},13,[348,609,610],{"class":354},"  >\n",[348,612,614,617,620,623,625,627,630,632],{"class":350,"line":613},14,[348,615,616],{"class":354},"    \u003C",[348,618,619],{"class":358},"XAxis",[348,621,622],{"class":362}," data-key",[348,624,369],{"class":354},[348,626,372],{"class":354},[348,628,629],{"class":375},"name",[348,631,372],{"class":354},[348,633,634],{"class":354}," \u002F>\n",[348,636,638,640,643,645,647,649,652,654],{"class":350,"line":637},15,[348,639,616],{"class":354},[348,641,642],{"class":358},"Bar",[348,644,622],{"class":362},[348,646,369],{"class":354},[348,648,372],{"class":354},[348,650,651],{"class":375},"value",[348,653,372],{"class":354},[348,655,634],{"class":354},[348,657,659,661],{"class":350,"line":658},16,[348,660,616],{"class":354},[348,662,663],{"class":358},"Brush\n",[348,665,667,670,672,675,677,679,681],{"class":350,"line":666},17,[348,668,669],{"class":362},"      v-model",[348,671,517],{"class":354},[348,673,674],{"class":362},"range",[348,676,369],{"class":354},[348,678,372],{"class":354},[348,680,674],{"class":394},[348,682,587],{"class":354},[348,684,686,689,691,693,695],{"class":350,"line":685},18,[348,687,688],{"class":362},"      data-key",[348,690,369],{"class":354},[348,692,372],{"class":354},[348,694,629],{"class":375},[348,696,587],{"class":354},[348,698,700],{"class":350,"line":699},19,[348,701,702],{"class":354},"    \u002F>\n",[348,704,706,709,711],{"class":350,"line":705},20,[348,707,708],{"class":354},"  \u003C\u002F",[348,710,332],{"class":358},[348,712,381],{"class":354},[348,714,716,718,720],{"class":350,"line":715},21,[348,717,542],{"class":354},[348,719,559],{"class":358},[348,721,381],{"class":354},[290,723,724,725,728],{},"The range is a pair of row indexes, both included. ",[293,726,727],{},"null"," selects all rows and hides the travellers.",[730,731,732,742,757],"ul",{},[733,734,735,741],"li",{},[736,737,738,739],"strong",{},"Without ",[293,740,674],{},", the Brush owns its window. It starts with all rows.",[733,743,744,749,750,752,753,756],{},[736,745,746,747],{},"With ",[293,748,674],{}," (including ",[293,751,727],{},"), you own the window. The Brush asks for changes with ",[293,754,755],{},"update:range","; the window changes only when you accept the value.",[733,758,759,760,762,763,765],{},"The Brush rounds indexes down, clamps them to the data, and puts them in order. Values that are not finite become ",[293,761,727],{},". When it corrects a value you supplied, it emits ",[293,764,755],{}," once with the corrected value.",[298,767,769],{"id":768},"when-the-data-changes","When the data changes",[290,771,772],{},"An uncontrolled Brush keeps its window by row index:",[730,774,775,781,787,793],{},[733,776,777,780],{},[736,778,779],{},"Same number of rows:"," the window does not change.",[733,782,783,786],{},[736,784,785],{},"Rows added, window ends at the last row:"," the window moves forward and keeps its width, so it follows the newest rows. A window over all rows stays over all rows.",[733,788,789,792],{},[736,790,791],{},"Rows added, window elsewhere:"," the window keeps its positions.",[733,794,795,798],{},[736,796,797],{},"Rows removed:"," the window is clamped to the new length. It resets only when no rows remain.",[290,800,801,802,804,805,807],{},"A moved or clamped window emits ",[293,803,755],{},". A controlled ",[293,806,307],{}," is never changed by the Brush; it only asks.",[290,809,810,811,813,814,816],{},"When the data becomes empty, the Brush emits ",[293,812,727],{},". If you accepted that ",[293,815,727],{},", the Brush asks for all rows when rows come back, so a filter that briefly finds nothing does not remove the travellers.",[290,818,819],{},"This rule differs from Recharts, which resets the window when it gets a new data array.",[298,821,823],{"id":822},"props","Props",[825,826,827,846],"table",{},[828,829,830],"thead",{},[831,832,833,837,840,843],"tr",{},[834,835,836],"th",{},"Prop",[834,838,839],{},"Type",[834,841,842],{},"Default",[834,844,845],{},"Description",[847,848,849,873,890,907,926,943,960,977,993,1012,1035,1055,1074,1094,1114,1133],"tbody",{},[831,850,851,856,861,864],{},[852,853,854],"td",{},[293,855,674],{},[852,857,858],{},[293,859,860],{},"BrushStartEndIndex | null",[852,862,863],{},"—",[852,865,866,867,870,871],{},"Selected rows ",[293,868,869],{},"{ startIndex, endIndex }",". Use with ",[293,872,307],{},[831,874,875,880,885,887],{},[852,876,877],{},[293,878,879],{},"data-key",[852,881,882],{},[293,883,884],{},"string | (row) => unknown",[852,886,863],{},[852,888,889],{},"Field shown in the traveller text. Without it, the text shows the row index",[831,891,892,897,902,904],{},[852,893,894],{},[293,895,896],{},"tick-formatter",[852,898,899],{},[293,900,901],{},"(value, index) => string",[852,903,863],{},[852,905,906],{},"Formats the traveller text",[831,908,909,913,918,923],{},[852,910,911],{},[293,912,595],{},[852,914,915],{},[293,916,917],{},"number",[852,919,920],{},[293,921,922],{},"40",[852,924,925],{},"Height of the brush in px",[831,927,928,933,937,940],{},[852,929,930],{},[293,931,932],{},"width",[852,934,935],{},[293,936,917],{},[852,938,939],{},"plot width",[852,941,942],{},"Width of the brush in px",[831,944,945,950,954,957],{},[852,946,947],{},[293,948,949],{},"x",[852,951,952],{},[293,953,917],{},[852,955,956],{},"plot left",[852,958,959],{},"Left edge in px",[831,961,962,967,971,974],{},[852,963,964],{},[293,965,966],{},"y",[852,968,969],{},[293,970,917],{},[852,972,973],{},"below the plot",[852,975,976],{},"Top edge in px",[831,978,979,984,988,990],{},[852,980,981],{},[293,982,983],{},"dy",[852,985,986],{},[293,987,917],{},[852,989,863],{},[852,991,992],{},"Extra vertical offset in px",[831,994,995,1000,1004,1009],{},[852,996,997],{},[293,998,999],{},"traveller-width",[852,1001,1002],{},[293,1003,917],{},[852,1005,1006],{},[293,1007,1008],{},"5",[852,1010,1011],{},"Width of each handle in px",[831,1013,1014,1019,1023,1028],{},[852,1015,1016],{},[293,1017,1018],{},"gap",[852,1020,1021],{},[293,1022,917],{},[852,1024,1025],{},[293,1026,1027],{},"1",[852,1029,1030,1031,1034],{},"Index step for dragging. With ",[293,1032,1033],{},"3",", the window moves 3 rows at a time",[831,1036,1037,1042,1047,1052],{},[852,1038,1039],{},[293,1040,1041],{},"fill",[852,1043,1044],{},[293,1045,1046],{},"string",[852,1048,1049],{},[293,1050,1051],{},"var(--v-charts-background, #fff)",[852,1053,1054],{},"Background fill",[831,1056,1057,1062,1066,1071],{},[852,1058,1059],{},[293,1060,1061],{},"stroke",[852,1063,1064],{},[293,1065,1046],{},[852,1067,1068],{},[293,1069,1070],{},"var(--v-charts-axis, #666)",[852,1072,1073],{},"Border, window and handle color",[831,1075,1076,1081,1086,1091],{},[852,1077,1078],{},[293,1079,1080],{},"padding",[852,1082,1083],{},[293,1084,1085],{},"{ top, right, bottom, left }",[852,1087,1088,1090],{},[293,1089,1027],{}," on each side",[852,1092,1093],{},"Margin of the panorama chart inside the brush",[831,1095,1096,1101,1106,1111],{},[852,1097,1098],{},[293,1099,1100],{},"always-show-text",[852,1102,1103],{},[293,1104,1105],{},"boolean",[852,1107,1108],{},[293,1109,1110],{},"false",[852,1112,1113],{},"Show the traveller text all the time, not only while you drag, hover or focus",[831,1115,1116,1121,1125,1130],{},[852,1117,1118],{},[293,1119,1120],{},"leave-time-out",[852,1122,1123],{},[293,1124,917],{},[852,1126,1127],{},[293,1128,1129],{},"1000",[852,1131,1132],{},"Milliseconds after the pointer leaves the chart before a drag ends",[831,1134,1135,1140,1145,1147],{},[852,1136,1137],{},[293,1138,1139],{},"class",[852,1141,1142],{},[293,1143,1144],{},"string | array | object",[852,1146,863],{},[852,1148,1149],{},"Class on the brush group",[290,1151,1152,1153,1156,1157,1160,1161,1164],{},"Other attributes, such as ",[293,1154,1155],{},"aria-label"," and ",[293,1158,1159],{},"data-*",", go to the brush group (",[293,1162,1163],{},"[data-slot=\"brush\"]",").",[298,1166,1168],{"id":1167},"events","Events",[825,1170,1171,1184],{},[828,1172,1173],{},[831,1174,1175,1178,1181],{},[834,1176,1177],{},"Event",[834,1179,1180],{},"Payload",[834,1182,1183],{},"When",[847,1185,1186,1199,1213],{},[831,1187,1188,1192,1196],{},[852,1189,1190],{},[293,1191,755],{},[852,1193,1194],{},[293,1195,860],{},[852,1197,1198],{},"The Brush asks for a new window: drag, keyboard, a correction of your value, or data changes",[831,1200,1201,1206,1210],{},[852,1202,1203],{},[293,1204,1205],{},"change",[852,1207,1208],{},[293,1209,496],{},[852,1211,1212],{},"The window changed through a drag or the keyboard",[831,1214,1215,1220,1224],{},[852,1216,1217],{},[293,1218,1219],{},"drag-end",[852,1221,1222],{},[293,1223,496],{},[852,1225,1226],{},"A drag of the window or a handle ended",[298,1228,1230],{"id":1229},"slots","Slots",[825,1232,1233,1242],{},[828,1234,1235],{},[831,1236,1237,1240],{},[834,1238,1239],{},"Slot",[834,1241,845],{},[847,1243,1244],{},[831,1245,1246,1249],{},[852,1247,1248],{},"default",[852,1250,1251,1252,325,1254,325,1256,325,1258,325,1260,1156,1262,1265],{},"One chart drawn inside the brush as a panorama. It receives ",[293,1253,320],{},[293,1255,949],{},[293,1257,966],{},[293,1259,932],{},[293,1261,595],{},[293,1263,1264],{},"margin"," from the Brush",[298,1267,1269],{"id":1268},"keyboard","Keyboard",[290,1271,1272,1273,1276,1277,1156,1280,1283,1284,1287,1288,1291,1292,1294],{},"Each handle is a slider (",[293,1274,1275],{},"role=\"slider\"",") in the tab order, labelled \"Range start\" and \"Range end\". ",[293,1278,1279],{},"ArrowLeft",[293,1281,1282],{},"ArrowRight"," move the focused handle by one row. The slider reports the row index as ",[293,1285,1286],{},"aria-valuenow"," and the category text as ",[293,1289,1290],{},"aria-valuetext",". A ",[293,1293,727],{}," range hides the handles.",[298,1296,1298],{"id":1297},"synchronised-charts","Synchronised charts",[290,1300,1301,1302,1305,1306,1309,1310,1312],{},"Charts with the same ",[293,1303,1304],{},"sync-id"," share the Brush window. A chart without its own Brush follows the window of a synchronised chart that has one. See ",[1307,1308,88],"a",{"href":89}," for the model rules and ",[1307,1311,113],{"href":114}," for keyboard support in other components.",[1314,1315,1316],"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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":344,"searchDepth":384,"depth":384,"links":1318},[1319,1320,1321,1322,1323,1324,1325,1326],{"id":300,"depth":384,"text":301},{"id":336,"depth":384,"text":337},{"id":768,"depth":384,"text":769},{"id":822,"depth":384,"text":823},{"id":1167,"depth":384,"text":1168},{"id":1229,"depth":384,"text":1230},{"id":1268,"depth":384,"text":1269},{"id":1297,"depth":384,"text":1298},"Select a window of rows in a cartesian chart","md",null,{},{"icon":249},{"title":246,"description":1327},"iShjJFS5cKxFkqbNfWr71vMh-tEo6pI4huLZFvgEVIc",[1335,1337],{"title":242,"path":243,"stem":244,"description":1336,"icon":152,"children":-1},"Configure the angle axis, radius axis and grid of radar and radial charts",{"title":251,"path":252,"stem":253,"description":1338,"icon":61,"children":-1},"Annotate charts with reference dots, lines, and areas",1793527170627]