@cdc/chart 4.26.3 → 4.26.4

package/src/components/LinearChart.tsx

@@ -35,6 +35,7 @@ import { useTickFormatters } from './LinearChart/utils/tickFormatting'
 import { isLegendWrapViewport, isMobileFontViewport } from '@cdc/core/helpers/viewports'
 import { calcInitialHeight } from '../helpers/sizeHelpers'
 import { calculateHorizontalBarCategoryLabelWidth } from '../helpers/calculateHorizontalBarCategoryLabelWidth'
+import { calculateLeftYAxisWidth } from '../helpers/calculateLeftYAxisWidth'
 
 // Hooks
 import useReduceData from '../hooks/useReduceData'
@@ -51,6 +52,7 @@ import Annotation from './Annotations'
 import { countNumOfTicks } from '../helpers/countNumOfTicks'
 import HoverLine from './HoverLine/HoverLine'
 import { SmallMultiples } from './SmallMultiples'
+import { type TooltipDisplayData } from '../helpers/tooltipHelpers'
 
 type LinearChartProps = {
   parentWidth: number
@@ -62,6 +64,7 @@ const BOTTOM_LABEL_PADDING = 9
 const X_TICK_LABEL_PADDING = 4.5
 const DEFAULT_TICK_LENGTH = 8
 const DEFAULT_MAX_TICK_ROTATION = 90
+const DEFAULT_LEFT_Y_AXIS_WIDTH = 50
 
 // Font sizes
 const TICK_LABEL_FONT_SIZE = 16
@@ -88,10 +91,7 @@ const WARMING_STRIPES_HEIGHT = 78
 // Time constants
 const MONTH_AS_MS = 1000 * 60 * 60 * 24 * 30
 
-type TooltipData = {
-  dataXPosition?: number
-  dataYPosition?: number
-}
+type TooltipData = Partial<TooltipDisplayData>
 
 type UseTooltipReturn<T = TooltipData> = {
   tooltipData: T | null
@@ -176,8 +176,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const isDateTime = config.xAxis.type === 'date-time'
   const inlineLabelHasNoSpace = !inlineLabel?.includes(' ')
   const needsYAxisAutoPadding = inlineLabel && !inlineLabelHasNoSpace
-  const padding = orientation === 'horizontal' ? Number(config.xAxis.size) : Number(config.yAxis.size)
-  const yLabelOffset = isNaN(parseInt(`${runtime.yAxis.labelOffset}`)) ? 0 : parseInt(`${runtime.yAxis.labelOffset}`)
   const tickLabelFontSize = isMobileFontViewport(vizViewport) ? TICK_LABEL_FONT_SIZE_SMALL : TICK_LABEL_FONT_SIZE
   const axisLabelFontSize = isMobileFontViewport(vizViewport) ? AXIS_LABEL_FONT_SIZE_SMALL : AXIS_LABEL_FONT_SIZE
   const GET_TEXT_WIDTH_FONT = `normal ${tickLabelFontSize}px Nunito, sans-serif`
@@ -258,11 +256,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
 
   const { yScaleRight, hasRightAxis } = useRightAxis({ config, yMax, data })
 
-  // State for computed y-axis width - allows re-render when horizontal bar label space is calculated
-  const [computedYAxisWidth, setComputedYAxisWidth] = useState<number | null>(null)
-
-  // Use computed width if available, otherwise fall back to config value
-  const yAxisWidth = computedYAxisWidth ?? Number(runtime.yAxis.size)
+  // State for computed left-axis width - shared across all linear-chart types.
+  const [currentYAxisWidth, setCurrentYAxisWidth] = useState<number>(DEFAULT_LEFT_Y_AXIS_WIDTH)
+  const yAxisWidth = currentYAxisWidth
 
   // Chart width calculation using the current y-axis width
   const xMax = parentWidth - yAxisWidth - (hasRightAxis ? config.yAxis.rightAxisSize : 0)
@@ -303,39 +299,77 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     shouldAbbreviate
   })
 
-  // Calculate category label space for horizontal bar charts
+  // Horizontal charts swap axes at runtime, but the left-side category label visibility
+  // still follows config.yAxis.hideLabel to match the actual axis renderers.
   const categoryLabelSpace = useMemo(() => {
+    if (config.yAxis.hideLabel) return 0
+
     return calculateHorizontalBarCategoryLabelWidth({
       yScale,
       chartWidth: parentWidth,
       formatDate,
       parseDate,
       tickLabelFont: GET_TEXT_WIDTH_FONT,
-      xAxisType: config.runtime.xAxis?.type,
+      xAxisType: runtime.xAxis?.type,
       labelPlacement: config.yAxis.labelPlacement
     })
-  }, [isHorizontal, config.visualizationType, config.yAxis.labelPlacement, yScale, parentWidth])
+  }, [
+    config.yAxis.hideLabel,
+    config.yAxis.labelPlacement,
+    yScale,
+    parentWidth,
+    formatDate,
+    parseDate,
+    GET_TEXT_WIDTH_FONT,
+    runtime.xAxis?.type
+  ])
 
   const horizontalYAxisLabelSpace = runtime.yAxis.label && !config.hideYAxisLabel ? 30 : 0
 
-  // Update y-axis width state when computed value changes (for horizontal bar charts)
-  useEffect(() => {
-    if (isHorizontal && config.visualizationType === 'Bar') {
-      const newWidth = categoryLabelSpace + horizontalYAxisLabelSpace
-      if (newWidth !== computedYAxisWidth) {
-        setComputedYAxisWidth(newWidth)
-      }
-    } else if (computedYAxisWidth !== null) {
-      // Reset to null for non-horizontal bar charts so we use config value
-      setComputedYAxisWidth(null)
-    }
-  }, [isHorizontal, config.visualizationType, categoryLabelSpace, horizontalYAxisLabelSpace, computedYAxisWidth])
-
   const [yTickCount, xTickCount] = ['yAxis', 'xAxis'].map(axis =>
     countNumOfTicks({ axis, max, runtime, currentViewport, isHorizontal, data, config, min })
   )
   const handleNumTicks = isForestPlot ? config.data.length : yTickCount
 
+  const calculatedYAxisWidth = useMemo(() => {
+    if (isHorizontal && config.visualizationType === 'Bar') {
+      return categoryLabelSpace + horizontalYAxisLabelSpace
+    }
+
+    return calculateLeftYAxisWidth({
+      config,
+      data,
+      yScale,
+      numTicks: handleNumTicks,
+      parentWidth,
+      tickLabelFont: GET_TEXT_WIDTH_FONT,
+      axisLabelFontSize,
+      handleLeftTickFormatting,
+      categoryLabelSpace,
+      horizontalYAxisLabelSpace
+    })
+  }, [
+    config,
+    data,
+    yScale,
+    handleNumTicks,
+    parentWidth,
+    isHorizontal,
+    GET_TEXT_WIDTH_FONT,
+    axisLabelFontSize,
+    handleLeftTickFormatting,
+    categoryLabelSpace,
+    horizontalYAxisLabelSpace
+  ])
+
+  useLayoutEffect(() => {
+    if (parentWidth <= 0) return
+
+    if (calculatedYAxisWidth !== currentYAxisWidth) {
+      setCurrentYAxisWidth(calculatedYAxisWidth)
+    }
+  }, [calculatedYAxisWidth, currentYAxisWidth, parentWidth])
+
   // Tooltip Helpers
 
   const { tooltipData, showTooltip, hideTooltip, tooltipOpen, tooltipLeft, tooltipTop } =
@@ -353,6 +387,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     xScale,
     yScale,
     seriesScale,
+    yAxisWidth,
     showTooltip,
     hideTooltip,
     interactionLabel
@@ -387,7 +422,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
     return manualStep
   }, [config.xAxis.manualStep, config.xAxis.viewportStepCount, currentViewport])
 
-  const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, getXValueFromCoordinate)
+  const smallMultiplesSync = useSmallMultipleSynchronization(xMax, yMax, yAxisWidth, getXValueFromCoordinate)
 
   const onMouseMove = event => {
     const svgRect = event.currentTarget.getBoundingClientRect()
@@ -416,7 +451,9 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
   const internalSvgRef = useProgrammaticTooltip({
     svgRef,
     getCoordinateFromXValue,
+    getXValueFromCoordinate,
     config,
+    yAxisWidth,
     setPoint,
     setShowHoverLine,
     handleTooltipMouseOver,
@@ -589,7 +626,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               xMax={xMax}
               yAxisWidth={yAxisWidth}
               numTicks={handleNumTicks}
-              yLabelOffset={yLabelOffset}
               axisLabelFontSize={axisLabelFontSize}
             />
           )}
@@ -673,8 +709,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   strokeDasharray={handleLineType(anchor.lineStyle)}
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-y'
-                  from={{ x: Number(runtime.yAxis.size), y: position - middleOffset }}
-                  to={{ x: Number(runtime.yAxis.size) + Number(xMax), y: position - middleOffset }}
+                  from={{ x: Number(yAxisWidth), y: position - middleOffset }}
+                  to={{ x: Number(yAxisWidth) + Number(xMax), y: position - middleOffset }}
                 />
               )
             })}
@@ -710,8 +746,8 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                   stroke={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   fill={anchor.color ? anchor.color : 'rgba(0,0,0,1)'}
                   className='anchor-x'
-                  from={{ x: Number(anchorPosition) + Number(padding), y: 0 }}
-                  to={{ x: Number(anchorPosition) + Number(padding), y: yMax }}
+                  from={{ x: Number(anchorPosition) + Number(yAxisWidth), y: 0 }}
+                  to={{ x: Number(anchorPosition) + Number(yAxisWidth), y: yMax }}
                 />
               )
             })}
@@ -728,6 +764,7 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               tooltipData={tooltipData}
               yMax={yMax}
               xMax={xMax}
+              yAxisWidth={yAxisWidth}
             />
           )}
           {isNoDataAvailable && (
@@ -741,8 +778,22 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
           )}
           {showHoverLine && (
             <>
-              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='horizontal' />
-              <HoverLine xMax={xMax} yMax={yMax} point={point} tooltipData={tooltipData} orientation='vertical' />
+              <HoverLine
+                xMax={xMax}
+                yMax={yMax}
+                point={point}
+                tooltipData={tooltipData}
+                orientation='horizontal'
+                yAxisWidth={yAxisWidth}
+              />
+              <HoverLine
+                xMax={xMax}
+                yMax={yMax}
+                point={point}
+                tooltipData={tooltipData}
+                orientation='vertical'
+                yAxisWidth={yAxisWidth}
+              />
             </>
           )}
           <Group left={yAxisWidth}>
@@ -778,7 +829,6 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
                 suffixWidth={suffixWidth}
                 horizontalYAxisLabelSpace={horizontalYAxisLabelSpace}
                 categoryLabelSpace={categoryLabelSpace}
-                yLabelOffset={yLabelOffset}
               />
             )}
           {config.yAxis.type === 'categorical' && config.orientation === 'vertical' && (
@@ -839,10 +889,10 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
         </svg>
         {!isDraggingAnnotation &&
           tooltipData &&
-          Object.entries(tooltipData.data).length > 0 &&
+          tooltipData.data?.length > 0 &&
           tooltipOpen &&
           showTooltip &&
-          !tooltipData?.data?.some(subArray => subArray.some(item => item === undefined)) &&
+          !tooltipData?.data?.some(row => row?.value === undefined) &&
           tooltipData.dataYPosition &&
           tooltipData.dataXPosition &&
           !config.tooltips.singleSeries && (
@@ -860,9 +910,16 @@ const LinearChart = forwardRef<SVGAElement, LinearChartProps>(({ parentHeight, p
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data)
-                      .filter(([_, values]) => Array.isArray(values) && !values.includes(undefined))
-                      .map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    tooltipData.data
+                      .filter(row => row && row.value !== undefined)
+                      .map((row, index) => (
+                        <TooltipListItem
+                          row={row}
+                          index={index}
+                          key={index}
+                          useMarkerColumn={tooltipData.useMarkerColumn}
+                        />
+                      ))}
                 </ul>
               </TooltipWithBounds>
             </>

package/src/components/PairedBarChart.jsx

@@ -10,7 +10,7 @@ import { APP_FONT_COLOR } from '@cdc/core/helpers/constants'
 import { getTextWidth } from '@cdc/core/helpers/getTextWidth'
 import { isMobileFontViewport } from '@cdc/core/helpers/viewports'
 
-const PairedBarChart = ({ width, height, originalWidth }) => {
+const PairedBarChart = ({ width, height, originalWidth, yAxisWidth }) => {
   const {
     config,
     colorScale,
@@ -93,7 +93,7 @@ const PairedBarChart = ({ width, height, originalWidth }) => {
           id='cdc-visualization__paired-bar-chart'
           width={originalWidth}
           height={height}
-          viewBox={`0 0 ${width + Number(config.runtime.yAxis.size)} ${height}`}
+          viewBox={`0 0 ${width + yAxisWidth} ${height}`}
           role='img'
           tabIndex={0}
         >

package/src/components/PieChart/PieChart.tsx

@@ -24,14 +24,9 @@ import { handleChartAriaLabels } from '../../helpers/handleChartAriaLabels'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import { scaleOrdinal } from '@visx/scale'
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
+import { type TooltipDisplayData } from '../../helpers/tooltipHelpers'
 
-type TooltipData = {
-  data: {
-    [key: string]: string | number
-  }
-  dataXPosition: number
-  dataYPosition: number
-}
+type TooltipData = TooltipDisplayData
 
 type PieChartProps = {
   parentWidth?: number
@@ -426,7 +421,7 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
         <div ref={triggerRef} />
         {!isDraggingAnnotation &&
           tooltipData &&
-          Object.entries(tooltipData.data).length > 0 &&
+          tooltipData.data?.length > 0 &&
           tooltipOpen &&
           showTooltip &&
           tooltipData.dataYPosition &&
@@ -442,7 +437,14 @@ const PieChart = React.forwardRef<SVGSVGElement, PieChartProps>((props, ref) =>
               >
                 <ul>
                   {typeof tooltipData === 'object' &&
-                    Object.entries(tooltipData.data).map((item, index) => <TooltipListItem item={item} key={index} />)}
+                    tooltipData.data.map((row, index) => (
+                      <TooltipListItem
+                        row={row}
+                        index={index}
+                        key={index}
+                        useMarkerColumn={tooltipData.useMarkerColumn}
+                      />
+                    ))}
                 </ul>
               </TooltipWithBounds>
             </>

package/src/components/Regions/components/Regions.tsx

@@ -10,7 +10,8 @@ const VIZ_TYPES = {
   BAR: 'Bar',
   LINE: 'Line',
   AREA: 'Area Chart',
-  COMBO: 'Combo'
+  COMBO: 'Combo',
+  HORIZON: 'Horizon Chart'
 } as const
 
 type Region = {
@@ -35,6 +36,7 @@ type RegionsProps = {
   barWidth?: number
   totalBarsInGroup?: number
   xMax?: number
+  yAxisWidth?: number
 }
 
 type HighlightedAreaProps = {
@@ -63,14 +65,22 @@ const findClosestDate = <T,>(targetTime: number, domain: T[], getTime: (d: T) =>
   return closest
 }
 
-/** Check if visualization type is line-like (Line or Area Chart) */
-const isLineLike = (type: string): boolean => type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA
+/** Check if visualization type is line-like (Line, Area Chart, or Horizon Chart) */
+const isLineLike = (type: string): boolean =>
+  type === VIZ_TYPES.LINE || type === VIZ_TYPES.AREA || type === VIZ_TYPES.HORIZON
 
 /** Check if visualization type is bar-like (Bar or Combo) */
 const isBarLike = (type: string): boolean => type === VIZ_TYPES.BAR || type === VIZ_TYPES.COMBO
 
 // TODO: should regions be removed on categorical axis?
-const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGroup = 1, yMax, xMax }) => {
+const Regions: React.FC<RegionsProps> = ({
+  xScale,
+  barWidth = 0,
+  totalBarsInGroup = 1,
+  yMax,
+  xMax,
+  yAxisWidth = 0
+}) => {
   const { parseDate, config } = useContext<ChartContext>(ConfigContext)
 
   const { regions, visualizationType, orientation, xAxis } = config
@@ -122,8 +132,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     } else {
       from = xScale(region.from)
     }
-    // Add left padding (yAxis.size) + half bandwidth to center on the category
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth to center on the category
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -135,8 +145,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateLineLastDatePosition_Categorical()
     }
     let to = xScale(region.to)
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -158,8 +168,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       const closestDate = findClosestDate(parsedDate, domain, d => d)
       from = xScale(closestDate)
     }
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -179,8 +189,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const closestDate = findClosestDate(parsedDate, domain, d => d)
     let to = xScale(closestDate)
 
-    // Add left padding (yAxis.size) + half bandwidth
-    let scalePadding = Number(config.yAxis.size)
+    // Add left padding (yAxisWidth) + half bandwidth
+    let scalePadding = yAxisWidth
     if (xScale.bandwidth) {
       scalePadding += xScale.bandwidth() / 2
     }
@@ -190,13 +200,13 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
   const getLineFromValue_DateTime = (region: Region): number => {
     if (region.fromType === 'Previous Days') {
       const from = calculatePreviousDaysFrom(region, 'date-time')
-      return from + Number(config.yAxis.size)
+      return from + yAxisWidth
     }
     const date = new Date(region.from)
     const parsedDate = parseDate(formatDate(config.xAxis.dateParseFormat, date, config.locale)).getTime()
     let from = xScale(parsedDate)
     // For date-time, xScale returns correct position (no bandwidth), just add left padding
-    return from + Number(config.yAxis.size)
+    return from + yAxisWidth
   }
 
   const getLineToValue_DateTime = (region: Region): number => {
@@ -204,17 +214,17 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
       return calculateLineLastDatePosition_DateTime()
     }
     let to = xScale(parseDate(region.to).getTime())
-    return to + Number(config.yAxis.size)
+    return to + yAxisWidth
   }
 
   const calculateLineLastDatePosition_Categorical = (): number => {
-    const chartStart = Number(config.yAxis.size || 0)
+    const chartStart = yAxisWidth
     // Extend to the right edge of the chart
     return chartStart + (xMax || 0)
   }
 
   const calculateLineLastDatePosition_Date = (): number => {
-    const chartStart = Number(config.yAxis.size || 0)
+    const chartStart = yAxisWidth
     // For date scale line charts with Last Date, extend to the right edge of the chart
     return chartStart + (xMax || 0)
   }
@@ -223,8 +233,8 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
     const domain = xScale.domain()
     const lastDate = domain[domain.length - 1]
     const lastDatePosition = xScale(lastDate)
-    // Match the non-Last Date logic: just add yAxis.size
-    return Number(lastDatePosition + Number(config.yAxis.size))
+    // Match the non-Last Date logic: just add yAxisWidth
+    return Number(lastDatePosition + yAxisWidth)
   }
 
   // ============================================
@@ -389,7 +399,7 @@ const Regions: React.FC<RegionsProps> = ({ xScale, barWidth = 0, totalBarsInGrou
 
   if (!regions || orientation !== 'vertical') return null
 
-  const chartStart = Number(config.yAxis.size || 0)
+  const chartStart = yAxisWidth
   const chartEnd = xMax !== undefined ? chartStart + xMax : chartStart + 1000
 
   return regions.map((region: Region) => {

package/src/components/ScatterPlot/ScatterPlot.jsx

@@ -4,22 +4,21 @@ import { Group } from '@visx/group'
 import { formatNumber as formatColNumber } from '@cdc/core/helpers/cove/number'
 import { publishAnalyticsEvent } from '@cdc/core/helpers/metrics/helpers'
 import { getVizTitle, getVizSubType } from '@cdc/core/helpers/metrics/utils'
+import { buildSeriesTooltipListHtml } from '../../helpers/tooltipHelpers'
 
-const ScatterPlot = ({ xScale, yScale }) => {
+const ScatterPlot = ({ xScale, yScale, yAxisWidth }) => {
   const {
     transformedData: data,
     config,
     tableData,
     formatNumber,
     seriesHighlight,
-    colorPalettes,
     colorScale,
     interactionLabel
   } = useContext(ConfigContext)
 
   // TODO: copied from line chart should probably be a constant somewhere.
   const circleRadii = 4.5
-  const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
   // Track current hover for analytics
   const [currentHover, setCurrentHover] = useState({ dataIndex: null, seriesKey: null })
@@ -37,23 +36,26 @@ const ScatterPlot = ({ xScale, yScale }) => {
       }
     ])
   const handleTooltip = (item, s, dataIndex) => `<div>
-    ${
-      config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries
-        ? `${config.runtime.seriesLabels[s] || ''}<br/>`
-        : ''
-    }
-    ${config.runtime?.xAxis?.label || config.xAxis.label}: ${formatNumber(item[config.xAxis.dataKey], 'bottom')} <br/>
-    ${config.runtime?.yAxis?.label || config.yAxis.label}: ${formatNumber(item[s], 'left')}<br/>
-   ${additionalColumns
-     .map(
-       ([label, name, options]) =>
-         `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}<br/>`
-     )
-     .join('')}
+    ${buildSeriesTooltipListHtml({
+      config,
+      colorScale,
+      heading: `${config.runtime?.xAxis?.label || config.xAxis.label}: ${formatNumber(
+        item[config.xAxis.dataKey],
+        'bottom'
+      )}`,
+      seriesKey: s,
+      seriesText: `${config.runtime.seriesLabels[s] || s}: ${formatNumber(item[s], 'left')}`,
+      extraRows: additionalColumns
+        .map(
+          ([label, name, options]) =>
+            `${label} : ${formatColNumber(tableData[dataIndex][name], 'left', false, config, options)}`
+        )
+        .filter(Boolean)
+    })}
 </div>`
 
   return (
-    <Group className='scatter-plot' left={config.yAxis.size}>
+    <Group className='scatter-plot' left={yAxisWidth}>
       {data.map((item, dataIndex) => {
         // prettier-ignore
         return config.runtime.seriesKeys.map((s, index) => {

package/src/components/SmallMultiples/SmallMultipleTile.tsx

@@ -114,6 +114,7 @@ const SmallMultipleTile: React.FC<SmallMultipleTileProps> = ({
     hideYAxisLabel: !isFirstInRow,
     legend: {
       ...tileConfig.legend,
+      tooltipLegendVisible: !config.legend?.hide,
       hide: true // Hide legends for all small multiple tiles
     },
     xAxis: {

package/src/components/Sparkline/components/SparkLine.tsx

@@ -34,7 +34,7 @@ const SparkLine: React.FC<SparkLineProps> = props => {
   const margin = { top: 5, right: 20, bottom: 10, left: 10 }
   const height = Number(parentHeight)
 
-  const xMax = width - config.runtime.yAxis.size
+  const xMax = width - 50
   const yMax = height - margin.top - 20
 
   const getXAxisData = d =>

package/src/components/WarmingStripes/WarmingStripes.tsx

@@ -15,6 +15,7 @@ type WarmingStripesProps = {
   yScale: any
   xMax: number
   yMax: number
+  yAxisWidth: number
   synchronizedXValue?: any
   showTooltip: (args: any) => void
   handleTooltipMouseOff: () => void
@@ -23,6 +24,7 @@ type WarmingStripesProps = {
 const WarmingStripes = ({
   xMax,
   yMax,
+  yAxisWidth,
   synchronizedXValue,
   showTooltip,
   handleTooltipMouseOff
@@ -119,7 +121,7 @@ const WarmingStripes = ({
         [valueKey, formattedValue, 'left']
       ]
 
-      const dataXPosition = index * stripeWidth + stripeWidth / 2 + Number(config.yAxis.size)
+      const dataXPosition = index * stripeWidth + stripeWidth / 2 + yAxisWidth
       const dataYPosition = mouseY ?? yMax / 2
 
       showTooltip({
@@ -132,7 +134,7 @@ const WarmingStripes = ({
         }
       })
     },
-    [valueKey, xAxisDataKey, stripeWidth, config.yAxis.size, yMax, formatNumber, showTooltip]
+    [valueKey, xAxisDataKey, stripeWidth, yAxisWidth, yMax, formatNumber, showTooltip]
   )
 
   // Handle incoming synchronized tooltip from sibling small multiple tiles
@@ -156,7 +158,7 @@ const WarmingStripes = ({
   }
 
   return (
-    <Group className='warming-stripes' left={config.yAxis.size}>
+    <Group className='warming-stripes' left={yAxisWidth}>
       {displayData.map((item, index) => {
         const value = Number(item[valueKey])
         if (isNaN(value)) return null

package/src/data/initial-state.js

@@ -156,6 +156,7 @@ const createInitialState = () => {
       height: '',
       caption: '',
       showDownloadUrl: false,
+      downloadUrlLabel: '',
       showDataTableLink: true,
       showDownloadLinkBelow: true,
       indexLabel: '',