Fix: scrollable vertical legend for long lists

Author: likhith5697

src/plugins/plugin.legend.js

@@ -18,7 +18,6 @@ import {_alignStartEnd, _textX, _toLeftRightCenter} from '../helpers/helpers.ext
 import {toTRBLCorners} from '../helpers/helpers.options.js';
 
 
-// @ts-ignore
 
 /**
  * @typedef { import('../types/index.js').ChartEvent } ChartEvent
@@ -122,13 +121,24 @@ export class Legend extends Element {
 
     this.legendItems = legendItems;
   }
+fit() {
+  const { options, ctx } = this;
+  if (!options.display) {
+    this.width = this.height = 0;
+    return;
+  }
 fit() {
   const { options, ctx } = this;
   if (!options.display) {
     this.width = this.height = 0;
     return;
   }
 
+  const labelOpts = options.labels;
+  const labelFont = toFont(labelOpts.font);
+  const fontSize = labelFont.size;
+  const titleHeight = this._computeTitleHeight();
+  const { boxWidth, itemHeight } = getBoxSize(labelOpts, fontSize);
   const labelOpts = options.labels;
   const labelFont = toFont(labelOpts.font);
   const fontSize = labelFont.size;
@@ -137,7 +147,27 @@ fit() {
 
   let width, height;
   ctx.font = labelFont.string;
+  let width, height;
+  ctx.font = labelFont.string;
+
+  if (this.isHorizontal()) {
+    width = this.maxWidth;
+    height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight) + 10;
+  } else {
+    height = this.maxHeight;
+    width = this._fitCols(titleHeight, labelFont, boxWidth, itemHeight) + 10;
+  }
+
+  // --- handle scroll height limit ---
+  const scrollOpts = options.scroll || {};
+  if (scrollOpts.enabled && scrollOpts.maxItems) {
+    const singleItemHeight = itemHeight + labelOpts.padding;
+    const visibleHeight = singleItemHeight * scrollOpts.maxItems + titleHeight + labelOpts.padding * 2;
+    this.height = Math.min(this.height, visibleHeight);
 
+    // wrap legend in scroll container
+    this._wrapLegendScroll(visibleHeight);
+  }
   if (this.isHorizontal()) {
     width = this.maxWidth;
     height = this._fitRows(titleHeight, fontSize, boxWidth, itemHeight) + 10;
@@ -161,6 +191,39 @@ fit() {
   this.height = Math.min(height, options.maxHeight || this.maxHeight);
 }
 
+/**
+ * Private helper to wrap the <ul> legend in a scrollable container
+ */
+_wrapLegendScroll(visibleHeight) {
+  const canvasContainer = this.chart.canvas.parentNode;
+  if (!canvasContainer) return;
+
+  const legendUL = canvasContainer.querySelector('ul.chartjs-legend');
+  if (!legendUL) return;
+
+  // Skip if already wrapped
+  if (canvasContainer.querySelector('.legend-scroll-wrapper')) return;
+
+  const legendWrapper = document.createElement('div');
+  legendWrapper.className = 'legend-scroll-wrapper';
+  legendWrapper.style.overflowY = 'auto';
+  legendWrapper.style.maxHeight = `${visibleHeight}px`;
+  legendWrapper.style.display = 'inline-block';
+
+  // Force single-column layout
+  legendUL.style.display = 'flex';
+  legendUL.style.flexDirection = 'column';
+  legendUL.style.margin = '0';
+  legendUL.style.padding = '0';
+
+  legendUL.parentNode.insertBefore(legendWrapper, legendUL);
+  legendWrapper.appendChild(legendUL);
+}
+
+  this.width = Math.min(width, options.maxWidth || this.maxWidth);
+  this.height = Math.min(height, options.maxHeight || this.maxHeight);
+}
+
 /**
  * Private helper to wrap the <ul> legend in a scrollable container
  */
@@ -232,6 +295,13 @@ _wrapLegendScroll(visibleHeight) {
   const columnSizes = this.columnSizes = [];
 
   const heightLimit = maxHeight - titleHeight;
+ _fitCols(titleHeight, labelFont, boxWidth, _itemHeight) {
+  const {ctx, maxHeight, options: {labels: {padding}}} = this;
+  const scrollOpts = this.options.scroll || {};
+  const hitboxes = this.legendHitBoxes = [];
+  const columnSizes = this.columnSizes = [];
+
+  const heightLimit = maxHeight - titleHeight;
 
   // --- SCROLL ENABLED: force single column ---
   if (scrollOpts.enabled && scrollOpts.maxItems) {
@@ -258,10 +328,44 @@ _wrapLegendScroll(visibleHeight) {
   let currentColHeight = 0;
   let left = 0;
   let col = 0;
+  // --- SCROLL ENABLED: force single column ---
+  if (scrollOpts.enabled && scrollOpts.maxItems) {
+    let totalWidth = 0;
+    let top = 0;
+    let maxItemWidth = 0;
+
+    this.legendItems.forEach((legendItem, i) => {
+      const {itemWidth, itemHeight} = calculateItemSize(boxWidth, labelFont, ctx, legendItem, _itemHeight);
+      hitboxes[i] = {left: 0, top, col: 0, width: itemWidth, height: itemHeight};
+      top += itemHeight + padding;
+      maxItemWidth = Math.max(maxItemWidth, itemWidth);
+    });
+
+    columnSizes.push({width: maxItemWidth, height: top});
+    totalWidth = maxItemWidth + 2 * padding;
+
+    return totalWidth;
+  }
 
+  // --- SCROLL DISABLED: original multi-column logic ---
+  let totalWidth = padding;
+  let currentColWidth = 0;
+  let currentColHeight = 0;
+  let left = 0;
+  let col = 0;
+
+  this.legendItems.forEach((legendItem, i) => {
+    const {itemWidth, itemHeight} = calculateItemSize(boxWidth, labelFont, ctx, legendItem, _itemHeight);
   this.legendItems.forEach((legendItem, i) => {
     const {itemWidth, itemHeight} = calculateItemSize(boxWidth, labelFont, ctx, legendItem, _itemHeight);
 
+    if (i > 0 && currentColHeight + itemHeight + 2 * padding > heightLimit) {
+      totalWidth += currentColWidth + padding;
+      columnSizes.push({width: currentColWidth, height: currentColHeight});
+      left += currentColWidth + padding;
+      col++;
+      currentColWidth = currentColHeight = 0;
+    }
     if (i > 0 && currentColHeight + itemHeight + 2 * padding > heightLimit) {
       totalWidth += currentColWidth + padding;
       columnSizes.push({width: currentColWidth, height: currentColHeight});
@@ -270,15 +374,23 @@ _wrapLegendScroll(visibleHeight) {
       currentColWidth = currentColHeight = 0;
     }
 
+    hitboxes[i] = {left, top: currentColHeight, col, width: itemWidth, height: itemHeight};
     hitboxes[i] = {left, top: currentColHeight, col, width: itemWidth, height: itemHeight};
 
     currentColWidth = Math.max(currentColWidth, itemWidth);
     currentColHeight += itemHeight + padding;
   });
+    currentColWidth = Math.max(currentColWidth, itemWidth);
+    currentColHeight += itemHeight + padding;
+  });
 
+  totalWidth += currentColWidth;
+  columnSizes.push({width: currentColWidth, height: currentColHeight});
   totalWidth += currentColWidth;
   columnSizes.push({width: currentColWidth, height: currentColHeight});
 
+  return totalWidth;
+}
   return totalWidth;
 }
   adjustHitBoxes() {
@@ -447,6 +559,12 @@ _wrapLegendScroll(visibleHeight) {
     const lineHeight = itemHeight + padding;
     const scrollOpts = this.options.scroll || {};
     let legendItems = this.legendItems;
+    if (scrollOpts.enabled && scrollOpts.maxItems) {
+        legendItems = legendItems.slice(0, scrollOpts.maxItems);
+    }
+      legendItems.forEach((legendItem, i) => {
+    const scrollOpts = this.options.scroll || {};
+    let legendItems = this.legendItems;
     if (scrollOpts.enabled && scrollOpts.maxItems) {
         legendItems = legendItems.slice(0, scrollOpts.maxItems);
     }
@@ -620,6 +738,15 @@ _wrapLegendScroll(visibleHeight) {
 
 
 
+
+
+
+
+
+
+
+
+
 function calculateItemSize(boxWidth, labelFont, ctx, legendItem, _itemHeight) {
   const itemWidth = calculateItemWidth(legendItem, boxWidth, labelFont, ctx);
   const itemHeight = calculateItemHeight(_itemHeight, legendItem, labelFont.lineHeight);
@@ -705,6 +832,20 @@ export default {
         console.log('Legend wrapper created inside afterUpdate!');
       }
     }
+  }
+    const scrollOpts = legend.options.scroll || {};
+  if (scrollOpts.enabled && scrollOpts.maxItems) {
+    const canvasContainer = chart.canvas.parentNode;
+    if (canvasContainer) {
+      const legendUL = canvasContainer.querySelector('ul.chartjs-legend');
+      if (legendUL && !canvasContainer.querySelector('.legend-scroll-wrapper')) {
+        const singleItemHeight = legend.legendHitBoxes[0].height + legend.options.labels.padding;
+        const titleHeight = legend._computeTitleHeight();
+        const visibleHeight = singleItemHeight * scrollOpts.maxItems + titleHeight + legend.options.labels.padding * 2;
+        legend._wrapLegendScroll(visibleHeight);
+        console.log('Legend wrapper created inside afterUpdate!');
+      }
+    }
   }
   },