optimizeLabels = function(series, options = {}) { const { space = 15, // Minimum distance between labels in pixels minY, // Minimum y position (top of chart - padding) maxY, // Maximum y position (bottom of chart + padding) yScale, // Y scale function lineHeight = 15, // Height of each line in pixels } = options // Helper function to calculate center based on selected method function calculateCenter(values) { // Mean (average of all values) return values.reduce((sum, val) => sum + val, 0) / values.length; } // Enhanced sort function that checks previous points on ties series.sort((a, b) => { // Determine the minimum length to avoid out-of-bounds access const minLength = Math.min(a.length, b.length); // Start from the last point and work backwards for (let i = 1; i <= minLength; i++) { const pa = a[a.length - i]; const pb = b[b.length - i]; if (pa.y > pb.y) return -1; else if (pa.y < pb.y) return 1; // If equal, continue to the next iteration to check previous points } // If all compared points are equal, maintain original order (return 0) // or sort by series length if they differ if (a.length !== b.length) { return b.length - a.length; // Longer series comes first } return 0; }); // Deep copy endpoints let points = series.map(s => ({...s[s.length-1]})); points.forEach((e,i) => { e.rank = i e.dy = options.yScale(e.y) }) // Create virtual points for each line of multi-line labels let virtualPoints = []; points.forEach((point, pointIndex) => { const lines = point.lines || [point.name]; // Use provided lines or default to name const numLines = lines.length; // Create a virtual point for each line lines.forEach((line, lineIndex) => { virtualPoints.push({ ...point, lineText: line, lineIndex: lineIndex, totalLines: numLines, originalPointIndex: pointIndex, isFirstLine: lineIndex === 0, isLastLine: lineIndex === lines.length - 1, // Initial position - center the group around the original y position dy: yScale(point.y) - (numLines - 1) * lineHeight / 2 + lineIndex * lineHeight, originalDy: yScale(point.y) - (numLines - 1) * lineHeight / 2 + lineIndex * lineHeight }); }); }); // Check if we need to use even spacing const totalRequiredSpace = virtualPoints.length * space; if (totalRequiredSpace > (maxY - minY)) { // Even spacing mode const availableSpace = maxY - minY; // Group virtual points by their original point index const groupedByPoint = new Map(); virtualPoints.forEach(vp => { if (!groupedByPoint.has(vp.originalPointIndex)) { groupedByPoint.set(vp.originalPointIndex, []); } groupedByPoint.get(vp.originalPointIndex).push(vp); }); // Sort groups by rank const sortedGroups = Array.from(groupedByPoint.entries()) .sort((a, b) => points[a[0]].rank - points[b[0]].rank); const numLabels = sortedGroups.length; // Decide between sparse and dense spacing const maxPossibleLabels = availableSpace / lineHeight; const useSparseSpacing = maxPossibleLabels >= numLabels; if (useSparseSpacing) { // SPARSE SPACING // Calculate total space needed for multi-line labels const totalInternalSpace = sortedGroups.reduce((sum, [_, group]) => sum + (group.length - 1) * lineHeight, 0); // Available space for distributing between groups const availableForBetweenGroups = availableSpace - totalInternalSpace; const spaceBetweenGroups = numLabels > 1 ? availableForBetweenGroups / (numLabels - 1) : 0; // Position each group let currentY = minY; sortedGroups.forEach(([pointIndex, group], groupIndex) => { // Sort by line index group.sort((a, b) => a.lineIndex - b.lineIndex); // Position lines within the group group.forEach((vp, lineIdx) => { vp.dy = currentY + lineIdx * lineHeight; }); // Move to next group position if (groupIndex < sortedGroups.length - 1) { currentY += (group.length - 1) * lineHeight + spaceBetweenGroups; } }); } else { // DENSE SPACING // Calculate how much extra space the last label needs for its additional lines const lastGroup = sortedGroups[sortedGroups.length - 1][1]; const lastLabelExtraSpace = (lastGroup.length - 1) * lineHeight; // The effective range for positioning first lines is from minY to (maxY - lastLabelExtraSpace) const effectiveRange = availableSpace - lastLabelExtraSpace; // Calculate even spacing between first lines within the effective range const spacingBetweenFirstLines = numLabels > 1 ? effectiveRange / (numLabels - 1) : 0; // Position each group sortedGroups.forEach(([pointIndex, group], groupIndex) => { // Sort by line index group.sort((a, b) => a.lineIndex - b.lineIndex); // Calculate position of first line const firstLineY = minY + groupIndex * spacingBetweenFirstLines; // Position all lines in the group group.forEach((vp, lineIdx) => { vp.dy = firstLineY + lineIdx * lineHeight; }); }); } } else { // Clustering algorithm with multi-line support // Binary search function to find insertion point (from repel function) function bisectLeft(groups, value) { let left = 0; let right = groups.length; while (left < right) { const mid = Math.floor((left + right) / 2); if (groups[mid].lo < value) { left = mid + 1; } else { right = mid; } } return left; } // First, create initial groups for ALL labels (both single-line and multi-line) const initialGroups = []; // Group virtual points by their original point index const pointGroups = new Map(); virtualPoints.forEach(vp => { if (!pointGroups.has(vp.originalPointIndex)) { pointGroups.set(vp.originalPointIndex, []); } pointGroups.get(vp.originalPointIndex).push(vp); }); // Create a group for each original point (both single-line and multi-line labels) pointGroups.forEach((virtualPointsForLabel, originalPointIndex) => { // Sort by line index to maintain order virtualPointsForLabel.sort((a, b) => a.lineIndex - b.lineIndex); const originalPositions = virtualPointsForLabel.map(vp => vp.originalDy); const center = calculateCenter(originalPositions); // Calculate the proper range for this group const numLines = virtualPointsForLabel.length; const rangeSize = (numLines - 1) * lineHeight; // Use lineHeight for spacing within a label // For single-line labels, the range is just the point itself // For multi-line labels, we need space between lines let lo, hi; if (numLines === 1) { // Single line - no range needed, just the point lo = center; hi = center; virtualPointsForLabel[0].dy = center; virtualPointsForLabel[0].originalDy = center; } else { // Multi-line - position lines evenly within the range centered on the calculated center lo = center - rangeSize / 2; hi = center + rangeSize / 2; // Adjust if bounds are exceeded if (lo < minY) { const shift = minY - lo; lo = minY; hi = lo + rangeSize; } else if (hi > maxY) { const shift = hi - maxY; hi = maxY; lo = hi - rangeSize; } // Update the actual positions of the virtual points in this group // Use lineHeight for spacing between lines of the same label virtualPointsForLabel.forEach((vp, idx) => { vp.dy = lo + idx * lineHeight; vp.originalDy = vp.dy; // Update original position for merging calculations }); } initialGroups.push({ center: (lo + hi) / 2, lo: lo, hi: hi, items: virtualPointsForLabel }); }); // Now use the repel-style merging algorithm const groups = []; // Sort initial groups by their center position initialGroups.sort((a, b) => a.center - b.center); // Insert each group and merge overlapping ones (adapted from repel function) for (const group of initialGroups) { let j = bisectLeft(groups, group.lo); groups.splice(j, 0, group); // Merge overlapping groups (adapted from repel function logic) while ( (groups[j + 1]?.lo < groups[j].hi + space) || (groups[j - 1]?.hi > groups[j].lo - space && (--j, true)) ) { const items = groups[j].items.concat(groups[j + 1].items); // Calculate the new center based on the average of all original positions const allOriginalPositions = items.map(item => item.originalDy); const newCenter = calculateCenter(allOriginalPositions); // Calculate the range needed for all items // Count how many distinct series (original points) are in the merged group const distinctSeries = new Set(items.map(item => item.originalPointIndex)); const numSeries = distinctSeries.size; // Group items by their original point const itemsByPoint = new Map(); items.forEach(item => { if (!itemsByPoint.has(item.originalPointIndex)) { itemsByPoint.set(item.originalPointIndex, []); } itemsByPoint.get(item.originalPointIndex).push(item); }); // Calculate total range needed: // - lineHeight between lines of same series // - space between different series let totalRangeNeeded = 0; itemsByPoint.forEach(pointItems => { totalRangeNeeded += (pointItems.length - 1) * lineHeight; }); totalRangeNeeded += (numSeries - 1) * space; // Position the group centered on the new average center let newLo = newCenter - totalRangeNeeded / 2; let newHi = newCenter + totalRangeNeeded / 2; // Adjust if bounds are exceeded if (newLo < minY) { const shift = minY - newLo; newLo = minY; newHi = newLo + totalRangeNeeded; // Recalculate center after shifting } else if (newHi > maxY) { const shift = newHi - maxY; newHi = maxY; newLo = newHi - totalRangeNeeded; // Recalculate center after shifting } groups.splice(j, 2, { lo: newLo, hi: newHi, items: items, center: (newLo + newHi) / 2 }); } } // Position each group for (const group of groups) { let start = group.lo; let end = group.hi; // Group items by their original point index const itemsByPoint = new Map(); group.items.forEach(item => { if (!itemsByPoint.has(item.originalPointIndex)) { itemsByPoint.set(item.originalPointIndex, []); } itemsByPoint.get(item.originalPointIndex).push(item); }); // Sort the groups by rank const sortedPointGroups = Array.from(itemsByPoint.entries()) .sort((a, b) => points[a[0]].rank - points[b[0]].rank); // Calculate positions let currentY = start; sortedPointGroups.forEach(([pointIndex, pointItems], groupIdx) => { // Sort items within the point by line index pointItems.sort((a, b) => a.lineIndex - b.lineIndex); // Position each line within this series pointItems.forEach((item, lineIdx) => { item.dy = currentY + lineIdx * lineHeight; }); // Move to next series position if (groupIdx < sortedPointGroups.length - 1) { currentY += (pointItems.length - 1) * lineHeight + space; } }); } } // Reconstruct the original points with line positions const resultPoints = []; for (let i = 0; i < points.length; i++) { const point = {...points[i]}; const pointVirtualLines = virtualPoints.filter(vp => vp.originalPointIndex === i); // Sort by line index to maintain order pointVirtualLines.sort((a, b) => a.lineIndex - b.lineIndex); // Store line positions point.linePositions = pointVirtualLines.map(vp => ({ text: vp.lineText, dy: vp.dy })); // Set the main dy to the position of the first line point.dy = pointVirtualLines[0].dy; resultPoints.push(point); } return resultPoints; }