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