@toclocoinc/lattice-grid 1.65.0 → 1.67.0

package/modules/charts.esm.min.js

@@ -1,5 +1,5 @@
 /*!
- * Lattice Grid 1.65.0, charts module
+ * Lattice Grid 1.67.0, charts module
  * Copyright (c) 2026 TOCLOCO Inc. All rights reserved.
  * https://latticegrid.dev
  */
@@ -243,9 +243,10 @@ bottom:top+height,
 gutter:{left,bottom,right,top},
 };
 }
-function shouldRotate(labels,slot,fontSize){
+function shouldRotate(labels,slot,fontSize,every){
 if(!labels.length||slot<=0)return false;
-return widestLabel(labels,fontSize)>slot-4;
+const step=Number.isFinite(every)&&every>0?Number(every):1;
+return widestLabel(labels,fontSize)>slot*step-4;
 }
 class Pool{
 #parent;
@@ -567,7 +568,7 @@ return`
   max-width:40%;overflow:auto;padding:4px 8px}
 .${NS}__legend[data-position="left"]{order:-1}
 .${NS}__legend-more{align-self:center;color:var(--lattice-foreground-muted,#5b6670)}
-.${NS}__tooltip{position:absolute;z-index:5;pointer-events:none;max-width:260px;
+.${NS}__tooltip{position:fixed;z-index:5;pointer-events:none;max-width:260px;
   padding:5px 8px;border-radius:4px;font-size:var(--lattice-font-size-sm,11px);
   background:var(--lattice-surface,#f7f8f9);color:var(--lattice-foreground,#1c2126);
   border:1px solid var(--lattice-border-color,#dfe3e6);
@@ -639,6 +640,7 @@ Object.defineProperty(__exports,"normaliseAxes",{enumerable:true,get:function(){
 Object.defineProperty(__exports,"tickValues",{enumerable:true,get:function(){return tickValues;}});
 Object.defineProperty(__exports,"tickLabeller",{enumerable:true,get:function(){return tickLabeller;}});
 Object.defineProperty(__exports,"drawAxisTitle",{enumerable:true,get:function(){return drawAxisTitle;}});
+Object.defineProperty(__exports,"labelEvery",{enumerable:true,get:function(){return labelEvery;}});
 Object.defineProperty(__exports,"drawMeasureAxis",{enumerable:true,get:function(){return drawMeasureAxis;}});
 Object.defineProperty(__exports,"drawCategoryAxis",{enumerable:true,get:function(){return drawCategoryAxis;}});
 Object.defineProperty(__exports,"leftLabelRoom",{enumerable:true,get:function(){return leftLabelRoom;}});
@@ -659,6 +661,7 @@ const setText=__m1["setText"];
 const svg=__m1["svg"];
 const __m2=__req("packages/modules/charts/typography.js");
 const applySize=__m2["applySize"];
+const CHAR_RATIO=__m2["CHAR_RATIO"];
 const truncateTo=__m2["truncateTo"];
 const __m3=__req("packages/modules/charts/styles.js");
 const NS=__m3["NS"];
@@ -696,6 +699,13 @@ return fallback.tick;
 }
 function drawAxisTitle(opts){
 if(!opts.text)return;
+const band=opts.side==='left'||opts.side==='right'
+?opts.plot.height
+:opts.plot.width;
+const shown=Number.isFinite(band)
+?truncateTo(String(opts.text),Math.max(0,band),opts.size)
+:String(opts.text);
+if(!shown||shown==='…')return;
 const node=svg(opts.group.ownerDocument,'text',{class:`${NS}__axis-title`});
 applySize(node,opts.size);
 if(opts.side==='left'){
@@ -719,28 +729,55 @@ y:round(opts.plot.bottom+opts.plot.gutter.bottom-2),
 'text-anchor':'middle',
 });
 }
-setText(node,opts.text);
+setText(node,shown);
+if(shown!==String(opts.text))node.setAttribute('aria-label',String(opts.text));
 opts.group.appendChild(node);
 }
+function labelEvery(opts){
+const{values,scale,size,horizontal,label}=opts;
+if(values.length<2)return 1;
+let pitch=Infinity;
+for(let i=1;i<values.length;i++){
+const gap=Math.abs(scale.of(values[i])-scale.of(values[i-1]));
+if(Number.isFinite(gap)&&gap<pitch)pitch=gap;
+}
+if(!Number.isFinite(pitch))return 1;
+if(pitch<=0)return values.length;
+let needed=size*LINE_HEIGHT+2;
+if(horizontal){
+let widest=0;
+for(const value of values){
+const width=String(label(value)||'').length*size*CHAR_RATIO;
+if(width>widest)widest=width;
+}
+needed=widest+GAP;
+}
+return Math.max(1,Math.ceil(needed/pitch));
+}
 function drawMeasureAxis(opts){
 const{gridGroup,axisGroup,plot,scale,format}=opts;
 const config=opts.config||{};
 const values=tickValues(scale,config);
 const label=tickLabeller(config,format,opts.grid);
 const size=opts.size||11;
+const every=labelEvery({
+values,scale,size,horizontal:!!opts.horizontal,label,
+});
 const lines=config.grid===false?null:gridGroup;
 const grid=lines?new Pool(lines):null;
 const labels=new Pool(axisGroup);
-for(const value of values){
+for(let i=0;i<values.length;i++){
+const value=values[i];
 const at=round(scale.of(value));
 const zero=value===0;
+const thinned=i%every!==0;
 if(opts.horizontal){
 if(grid)attrs(grid.next('line',`${NS}__gridline`),{
 x1:at,x2:at,y1:round(plot.top),y2:round(plot.bottom),
 'stroke-opacity':zero?1:0.6,
 'stroke-width':zero?1.5:1,
 });
-if(config.labels===false)continue;
+if(config.labels===false||thinned)continue;
 const text=labels.next('text',`${NS}__tick`);
 applySize(text,size);
 attrs(text,{
@@ -754,7 +791,7 @@ x1:round(plot.left),x2:round(plot.right),y1:at,y2:at,
 'stroke-opacity':zero?1:0.6,
 'stroke-width':zero?1.5:1,
 });
-if(config.labels===false)continue;
+if(config.labels===false||thinned)continue;
 const text=labels.next('text',`${NS}__tick`);
 applySize(text,size);
 attrs(text,{
@@ -2581,12 +2618,12 @@ Object.defineProperty(__exports,"frameBatched",{enumerable:true,get:function(){r
 Object.defineProperty(__exports,"settleDebounce",{enumerable:true,get:function(){return settleDebounce;}});
 Object.defineProperty(__exports,"whenIdle",{enumerable:true,get:function(){return whenIdle;}});
 Object.defineProperty(__exports,"uid",{enumerable:true,get:function(){return uid;}});
-const STAMPED_VERSION="1.65.0";
+const STAMPED_VERSION="1.67.0";
 async function resolveVersion(){
 if(STAMPED_VERSION!=='0.0.0-source')return STAMPED_VERSION;
 return STAMPED_VERSION;
 }
-const VERSION="1.65.0";
+const VERSION="1.67.0";
 const warned=new Set();
 const WARNED_LIMIT=2000;
 function rememberWarned(key){
@@ -2957,6 +2994,8 @@ Object.defineProperty(__exports,"drawBoundErrorBars",{enumerable:true,get:functi
 Object.defineProperty(__exports,"drawForest",{enumerable:true,get:function(){return drawForest;}});
 Object.defineProperty(__exports,"drawReferenceLines",{enumerable:true,get:function(){return drawReferenceLines;}});
 Object.defineProperty(__exports,"drawCartesian",{enumerable:true,get:function(){return drawCartesian;}});
+Object.defineProperty(__exports,"HIT_TOLERANCE",{enumerable:true,get:function(){return HIT_TOLERANCE;}});
+Object.defineProperty(__exports,"nearestDrawnPoint",{enumerable:true,get:function(){return nearestDrawnPoint;}});
 Object.defineProperty(__exports,"nearestCategory",{enumerable:true,get:function(){return nearestCategory;}});
 Object.defineProperty(__exports,"categoryKeyAt",{enumerable:true,get:function(){return categoryKeyAt;}});
 const __m0=__req("packages/modules/charts/axis.js");
@@ -3777,7 +3816,7 @@ plot,
 scale:xScale,
 labels:bound.labels,
 fontSize:type_.small,
-rotated:shouldRotate(bound.labels,xScale.step,type_.small),
+rotated:shouldRotate(bound.labels,xScale.step,type_.small,axisConfig.x.every),
 config:axisConfig.x,
 });
 }else{
@@ -3828,11 +3867,16 @@ group:ctx.groups.axis,plot,text:leftSeries[0].label,side:'left',size:type_.axisT
 const target=Number.isFinite(ctx.downsampleTo)
 ?Number(ctx.downsampleTo)
 :Math.max(2,Math.round(plot.width));
+let reduced=false;
 if(shape.marks==='path'||type==='scatter'||type==='bubble'){
 for(const series of visible){
+series.kept=null;
 if(series.points.length>target*1.5){
 const indexed=series.points.map((point,i)=>({x:i,y:point.y,point}));
-series.points=downsample(indexed,target).map((entry)=>entry.point);
+const picked=downsample(indexed,target);
+series.points=picked.map((entry)=>entry.point);
+series.kept=picked.map((entry)=>entry.x);
+reduced=true;
 }
 }
 }
@@ -4022,8 +4066,42 @@ plot,
 errorBars,
 annotations:describedAll,
 trendlines,
+reduced,
 };
 }
+const HIT_TOLERANCE=32;
+function nearestDrawnPoint(opts){
+const{series,xScale,at}=opts;
+const tolerance=Number.isFinite(opts.tolerance)?Number(opts.tolerance):HIT_TOLERANCE;
+const entries=[];
+let index=-1;
+let best=Infinity;
+for(const one of series){
+let near=null;
+let nearAt=-1;
+let nearest=Infinity;
+const points=one.points||[];
+for(let i=0;i<points.length;i++){
+const point=points[i];
+if(!point||!isNumber(point.y))continue;
+const px=xOf(xScale,point);
+if(Number.isNaN(px))continue;
+const distance=Math.abs(px-at);
+if(distance>=nearest)continue;
+nearest=distance;
+near=point;
+nearAt=Array.isArray(one.kept)?one.kept[i]:i;
+}
+if(!near||nearest>tolerance)continue;
+entries.push({series:one,point:near});
+if(nearest<best){
+best=nearest;
+index=nearAt;
+}
+}
+if(index<0)return null;
+return{index,entries};
+}
 function nearestCategory(opts){
 const{bound,xScale,at}=opts;
 if(!bound.categories.length)return-1;
@@ -4815,6 +4893,8 @@ __def("packages/modules/charts/distribution.js",function(__exports,__req){
 Object.defineProperty(__exports,"FENCE",{enumerable:true,get:function(){return FENCE;}});
 Object.defineProperty(__exports,"quantile",{enumerable:true,get:function(){return quantile;}});
 Object.defineProperty(__exports,"summarise",{enumerable:true,get:function(){return summarise;}});
+Object.defineProperty(__exports,"binEdge",{enumerable:true,get:function(){return binEdge;}});
+Object.defineProperty(__exports,"outsideDomain",{enumerable:true,get:function(){return outsideDomain;}});
 Object.defineProperty(__exports,"histogram",{enumerable:true,get:function(){return histogram;}});
 Object.defineProperty(__exports,"readingsOf",{enumerable:true,get:function(){return readingsOf;}});
 Object.defineProperty(__exports,"valuesByCategory",{enumerable:true,get:function(){return valuesByCategory;}});
@@ -4837,6 +4917,7 @@ const drawAxisLines=__m1["drawAxisLines"];
 const drawCategoryAxis=__m1["drawCategoryAxis"];
 const drawContinuousAxis=__m1["drawContinuousAxis"];
 const drawMeasureAxis=__m1["drawMeasureAxis"];
+const tickLabeller=__m1["tickLabeller"];
 const __m2=__req("packages/modules/charts/format.js");
 const formatters=__m2["formatters"];
 const __m3=__req("packages/modules/charts/scale.js");
@@ -4857,6 +4938,7 @@ const __m7=__req("packages/modules/charts/labels.js");
 const drawAnchoredLabels=__m7["drawAnchoredLabels"];
 const labelText=__m7["labelText"];
 const FENCE=1.5;
+const DASH='\u2013';
 function quantile(sorted,p){
 const n=sorted.length;
 if(!n)return NaN;
@@ -4896,18 +4978,42 @@ outliers:sorted.filter((v)=>v<lowFence||v>highFence),
 count:sorted.length,
 };
 }
-function histogram(values,buckets=12){
+function binEdge(first,step,i){
+const v=first+i*step;
+return Math.abs(v)<step/1e6?0:Number(v.toPrecision(12));
+}
+function outsideDomain(values,domain){
+const declared=domain||{};
+const hasMin=isNumber(declared.min);
+const hasMax=isNumber(declared.max);
+if(!hasMin&&!hasMax)return 0;
+let out=0;
+for(let i=0;i<values.length;i++){
+const v=values[i];
+if(!isNumber(v))continue;
+if((hasMin&&v<declared.min)||(hasMax&&v>declared.max))out++;
+}
+return out;
+}
+function histogram(values,buckets=12,domain){
+const declared=domain||{};
+const hasMin=isNumber(declared.min);
+const hasMax=isNumber(declared.max);
 let min=Infinity;
 let max=-Infinity;
 let count=0;
 for(let i=0;i<values.length;i++){
 const v=values[i];
 if(!isNumber(v))continue;
+if(hasMin&&v<declared.min)continue;
+if(hasMax&&v>declared.max)continue;
 if(v<min)min=v;
 if(v>max)max=v;
 count++;
 }
 if(!count)return[];
+if(hasMin)min=Number(declared.min);
+if(hasMax)max=Number(declared.max);
 if(min===max){
 const pad=Math.abs(min)>0?Math.abs(min)/10:0.5;
 min-=pad;
@@ -4917,13 +5023,15 @@ const step=niceStep((max-min)/Math.max(1,buckets));
 const first=Math.floor(min/step)*step;
 const last=Math.ceil(max/step)*step;
 const out=[];
-for(let edge=first;edge<last-step/1e6;edge+=step){
-out.push({from:Number(edge.toPrecision(12)),to:Number((edge+step).toPrecision(12)),count:0});
+const bins=Math.max(1,Math.round((last-first)/step));
+for(let i=0;i<bins;i++){
+out.push({from:binEdge(first,step,i),to:binEdge(first,step,i+1),count:0});
 }
-if(!out.length)out.push({from:first,to:first+step,count:0});
 for(let i=0;i<values.length;i++){
 const v=values[i];
 if(!isNumber(v))continue;
+if(hasMin&&v<declared.min)continue;
+if(hasMax&&v>declared.max)continue;
 let index=Math.floor((v-first)/step);
 if(index>=out.length)index=out.length-1;
 if(index<0)index=0;
@@ -4988,16 +5096,35 @@ out.push({at,density:sum/(n*bandwidth*Math.sqrt(Math.PI*2))});
 }
 return out;
 }
+function binFormatter(ctx,bound,step){
+const numbers=formatters(ctx.grid,{kind:'linear',step});
+const column=bound.measure&&bound.measure.col&&ctx.grid.columns
+?ctx.grid.columns.get(bound.measure.col)
+:null;
+const formatted=!!(column&&column.format&&typeof column.formatValue==='function');
+const fallback=formatted
+?{
+tick:(v)=>String(column.formatValue(v,null)),
+}
+:numbers;
+return tickLabeller((ctx.axis&&ctx.axis.x)||{},fallback,ctx.grid);
+}
 function drawHistogram(ctx){
 const scheme=ctx.scheme||resolveScheme();
 const{plot,bound}=ctx;
 const values=allReadings(bound);
-const buckets=histogram(values,ctx.buckets||12);
+const declared=(ctx.axis&&ctx.axis.y)||{};
+const buckets=histogram(values,ctx.buckets||12,declared);
+const outside=outsideDomain(values,declared);
 const counts=buckets.map((b)=>b.count);
 const yDomain=measureDomain(counts,{zero:true});
 const yScale=linearScale(yDomain,[plot.bottom,plot.top]);
-const labels=buckets.map((b)=>String(b.from));
-const xScale=bandScale(labels,[plot.left,plot.right],0.08);
+const step=buckets.length?buckets[0].to-buckets[0].from:1;
+const edge=binFormatter(ctx,bound,step);
+const labels=buckets.map((b)=>edge(b.from));
+const ranges=buckets.map((b)=>`${edge(b.from)} ${DASH} ${edge(b.to)}`);
+const keys=buckets.map((unused,i)=>i);
+const xScale=bandScale(keys,[plot.left,plot.right],0.08);
 drawMeasureAxis({
 gridGroup:ctx.groups.grid,
 axisGroup:ctx.groups.axis,
@@ -5019,7 +5146,7 @@ const base=yScale.of(yDomain.min<=0?0:yDomain.min);
 buckets.forEach((bucket,i)=>{
 const top=yScale.of(bucket.count);
 attrs(pool.next('rect',`${NS}__bar ${NS}__mark`),{
-x:round(xScale.of(labels[i])),
+x:round(xScale.of(i)),
 y:round(Math.min(top,base)),
 width:round(xScale.bandwidth),
 height:round(Math.max(bucket.count>0?1:0,Math.abs(base-top))),
@@ -5060,7 +5187,7 @@ const top=Math.min(yScale.of(bucket.count),base);
 const above=top-size/2-2;
 const inside=above<plot.top;
 return{
-x:round(xScale.of(labels[i])+xScale.bandwidth/2),
+x:round(xScale.of(i)+xScale.bandwidth/2),
 y:round(inside?top+size/2+2:above),
 text:bucket.count?labelText(bucket.count,ctx.labels,ctx.grid):'',
 inside,
@@ -5073,12 +5200,15 @@ return{
 xScale,
 yScale,
 buckets,
+labels:ranges,
+categories:buckets.map((b)=>b.from),
+outside,
 series:[{
 key:'',
 label:bound.measure.title,
 index:0,
 points:buckets.map((b,i)=>({
-x:labels[i],xKey:labels[i],label:`${b.from} – ${b.to}`,y:b.count,rows:b.count,
+x:i,xKey:String(i),label:ranges[i],from:b.from,to:b.to,y:b.count,rows:b.count,
 })),
 }],
 };
@@ -8502,7 +8632,8 @@ plot,
 scale:xScale,
 labels:bound.labels,
 fontSize:(ctx.typography&&ctx.typography.small)||ctx.fontSize,
-rotated:shouldRotate(bound.labels,xScale.step,ctx.fontSize),
+rotated:shouldRotate(bound.labels,xScale.step,ctx.fontSize,
+((ctx.axis&&ctx.axis.x)||{}).every),
 config:(ctx.axis&&ctx.axis.x)||{},
 });
 return{xScale,yScale,series:visible};
@@ -9205,6 +9336,7 @@ const axisWindowSpan=__m0["axisWindowSpan"];
 const drawCartesian=__m0["drawCartesian"];
 const drawForest=__m0["drawForest"];
 const nearestCategory=__m0["nearestCategory"];
+const nearestDrawnPoint=__m0["nearestDrawnPoint"];
 const staleWindow=__m0["staleWindow"];
 const WINDOW_LEAD=__m0["WINDOW_LEAD"];
 const windowedBound=__m0["windowedBound"];
@@ -9488,6 +9620,7 @@ class Chart{
 #groups=null;
 #legend=null;
 #tooltip=null;
+#tooltipEscapeChecked=false;
 #table=null;
 #empty=null;
 #off=[];
@@ -9688,11 +9821,39 @@ return{x:(event.clientX||0)-box.left,y:(event.clientY||0)-box.top};
 }
 #categoryAt(at){
 return nearestCategory({
-bound:this.#bound,
+bound:{categories:this.#shown().categories},
+xScale:this.#drawn.xScale,
+at:this.#drawn.horizontal?at.y:at.x,
+});
+}
+#shown(){
+const drawn=this.#drawn;
+if(drawn&&Array.isArray(drawn.labels)&&Array.isArray(drawn.categories)){
+return{labels:drawn.labels,categories:drawn.categories};
+}
+return{
+labels:(this.#bound&&this.#bound.labels)||[],
+categories:(this.#bound&&this.#bound.categories)||[],
+};
+}
+#marksAt(at){
+if(!this.#drawn||!Array.isArray(this.#drawn.series))return null;
+if(this.#drawn.reduced){
+return nearestDrawnPoint({
+series:this.#drawn.series,
 xScale:this.#drawn.xScale,
 at:this.#drawn.horizontal?at.y:at.x,
 });
 }
+const index=this.#categoryAt(at);
+if(index<0)return null;
+return{
+index,
+entries:this.#drawn.series
+.map((series)=>({series,point:series.points[index]}))
+.filter((entry)=>entry.point&&entry.point.y!==null),
+};
+}
 #hitAt(at){
 return resolveHit({
 drawn:this.#drawn,
@@ -9710,7 +9871,7 @@ const rows=[];
 let heading='';
 const hit=this.#hitAt(at);
 if(hit){
-this.#showTooltip(hit.heading,hit.rows,at);
+this.#showTooltip(hit.heading,hit.rows,event);
 this.emit('hover',{...hit.datum,native:event});
 return;
 }
@@ -9732,19 +9893,17 @@ value:`${measureText(arc.total,this.#grid.messages)} (${this.#grid.messages.numb
 colour:this.#scheme.series(arc.index),
 });
 }else{
-const index=this.#categoryAt(at);
-if(index<0){
+const marks=this.#marksAt(at);
+if(!marks){
 this.#hideTooltip();
 return;
 }
-heading=this.#bound.labels[index]||'';
-for(const series of this.#drawn.series){
-const point=series.points[index];
-if(!point||point.y===null)continue;
+heading=this.#shown().labels[marks.index]||'';
+for(const entry of marks.entries){
 rows.push({
-label:series.label,
-value:measureText(point.y,this.#grid.messages),
-colour:this.#scheme.series(series.index),
+label:entry.series.label,
+value:measureText(entry.point.y,this.#grid.messages),
+colour:this.#scheme.series(entry.series.index),
 });
 }
 }
@@ -9752,11 +9911,11 @@ if(!rows.length){
 this.#hideTooltip();
 return;
 }
-this.#showTooltip(heading,rows,at);
+this.#showTooltip(heading,rows,event);
 const datum=this.#datumAt(at);
 if(datum)this.emit('hover',{...datum,native:event});
 }
-#showTooltip(heading,rows,at){
+#showTooltip(heading,rows,event){
 const doc=this.#doc;
 clear(this.#tooltip);
 if(heading){
@@ -9778,7 +9937,52 @@ append(line,[swatch,label,value]);
 this.#tooltip.appendChild(line);
 }
 this.#tooltip.removeAttribute('hidden');
-this.#tooltip.setAttribute('style',`left:${Math.round(at.x+12)}px;top:${Math.round(at.y+12)}px`);
+this.#positionTooltip(event);
+}
+#positionTooltip(event){
+if(!this.#tooltipEscapeChecked){
+this.#tooltipEscapeChecked=true;
+if(this.#hasContainingBlockAncestor()){
+const body=this.#doc&&this.#doc.body;
+if(body&&typeof body.appendChild==='function')body.appendChild(this.#tooltip);
+}
+}
+const view=viewOf(this.#doc);
+const margin=12;
+const pointerX=(event&&event.clientX)||0;
+const pointerY=(event&&event.clientY)||0;
+const rect=typeof this.#tooltip.getBoundingClientRect==='function'
+?this.#tooltip.getBoundingClientRect()
+:{width:0,height:0};
+const vw=view.innerWidth||0;
+const vh=view.innerHeight||0;
+let left=pointerX+margin;
+if(vw&&left+rect.width>vw-margin)left=pointerX-margin-rect.width;
+left=Math.max(margin,left);
+let top=pointerY+margin;
+if(vh&&top+rect.height>vh-margin)top=pointerY-margin-rect.height;
+top=Math.max(margin,top);
+this.#tooltip.style.left=`${Math.round(left)}px`;
+this.#tooltip.style.top=`${Math.round(top)}px`;
+}
+#hasContainingBlockAncestor(){
+const view=viewOf(this.#doc);
+if(typeof view.getComputedStyle!=='function')return false;
+let node=this.#root&&this.#root.parentNode;
+while(node){
+if(node.nodeType===11&&node.host){node=node.host;continue;}
+if(node.nodeType!==1)break;
+const style=view.getComputedStyle(node);
+if(style&&(
+(style.transform&&style.transform!=='none')
+||(style.perspective&&style.perspective!=='none')
+||(style.filter&&style.filter!=='none')
+||(style.backdropFilter&&style.backdropFilter!=='none')
+||(style.contain&&/layout|paint|strict|content/.test(style.contain))
+))return true;
+node=node.parentNode;
+}
+return false;
 }
 #hideTooltip(){
 if(this.#tooltip)this.#tooltip.setAttribute('hidden','');
@@ -9803,16 +10007,19 @@ path:Array.isArray(arc.path)?[...arc.path]:[arc.label],
 rowKeys:arc.node.rowKey?[arc.node.rowKey]:[],
 };
 }
-const index=this.#categoryAt(at);
-if(index<0)return null;
-const points=this.#drawn.series
-.map((series)=>({series,point:series.points[index]}))
-.filter((entry)=>entry.point&&entry.point.y!==null);
+const marks=this.#marksAt(at);
+if(!marks)return null;
+const points=marks.entries;
+const shown=this.#shown();
+const span=points.length===1&&points[0].point.from!==undefined
+?{from:points[0].point.from,to:points[0].point.to}
+:null;
 return{
-label:this.#bound.labels[index]||'',
-category:this.#bound.categories[index],
+label:shown.labels[marks.index]||'',
+category:shown.categories[marks.index],
 column:this.#bound.dimension.col,
 value:points.length===1?points[0].point.y:null,
+...(span||{}),
 series:points.map((entry)=>({
 key:entry.series.key,
 label:entry.series.label,
@@ -10421,6 +10628,7 @@ out.warn(message);
 }
 }
 if(this.#drawn)this.#drawn.plot=this.#drawn.plot||plotOf(this.#drawn,width,height);
+if(this.#bound)this.#bound.outside=(this.#drawn&&this.#drawn.outside)||0;
 if(this.#spec.selection)this.#emphasise();
 this.#watermark();
 this.#describe(type,bound,hierarchical);
@@ -10670,17 +10878,22 @@ const heading=el(doc,'th');
 setText(heading,measure);
 head.appendChild(heading);
 }else{
-for(const series of bound.series||[]){
+const shown=this.#shown();
+const table_=this.#drawn&&Array.isArray(this.#drawn.labels)
+&&Array.isArray(this.#drawn.series)&&Array.isArray(this.#drawn.categories)
+?this.#drawn.series
+:(bound.series||[]);
+for(const series of table_){
 const th=el(doc,'th');
 setText(th,series.label);
 head.appendChild(th);
 }
-for(let i=0;i<(bound.labels||[]).length;i++){
+for(let i=0;i<(shown.labels||[]).length;i++){
 const tr=el(doc,'tr');
 const th=el(doc,'th');
-setText(th,bound.labels[i]);
+setText(th,shown.labels[i]);
 tr.appendChild(th);
-for(const series of bound.series||[]){
+for(const series of table_){
 const td=el(doc,'td');
 const point=series.points[i];
 setText(td,point&&point.y!==null?measureText(point.y,messages):'');