@cdc/chart 4.23.6 → 4.23.7

package/index.html

@@ -38,10 +38,9 @@
   <!-- <div class="react-container" data-config="/examples/feature/filters/filter-testing.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/line/line-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/forecasting/index.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/forecasting/index.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/combo-forecasting.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/feature/forecasting/non-combo-forecasting.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/effective_reproduction.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-date.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/area/area-chart-category.json"></div> -->
@@ -66,18 +65,18 @@
   <!-- <div class="react-container" data-config="/examples/feature/sparkline/example-sparkline.json"></div> -->
 
   <!-- TESTS DATE EXCLUSIONS -->
-  <!-- <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div> -->
+  <div class="react-container" data-config="/examples/feature/tests-date-exclusions/date-exclusions-config.json"></div>
   <!-- <div class="react-container" data-config="/examples/feature/tests-case-rate/case-rate-example-config.json"></div> -->
 
    <!-- TESTS BIG SMALL-->
-  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div>  -->
+  <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-line.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-bar.json"></div>  -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/big-small-test-negative.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-big-small/line-chart-max-increase.json"></div> -->
 
   <!-- TESTS NONNUMERICS -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/planet-pie-example-config-nonnumeric.json"></div> -->
-  <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div>
+  <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-combo-bar-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/example-bar-chart-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/sparkline-chart-nonnumeric.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/tests-non-numerics/stacked-vertical-bar-example-nonnumerics.json"></div> -->
@@ -106,7 +105,8 @@
 
   <!-- VERTICAL BAR CHARTS -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/combo-line-chart.json"></div> -->
-  <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div> -->
+  <!-- <div class="react-container" data-config="/examples/private/problem.json"></div> -->
+  <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-categorical.json"></div>
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-stacked.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/gallery/bar-chart-vertical/vertical-bar-chart-confidence.json"></div>  -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdc/chart",
-  "version": "4.23.6",
+  "version": "4.23.7",
   "description": "React component for visualizing tabular data in various types of charts",
   "moduleName": "CdcChart",
   "main": "dist/cdcchart",
@@ -57,7 +57,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "gitHead": "aaed0388b487adfeb3e7e278b4ce74df09cbaade",
+  "gitHead": "6c7ac5215dcf3bc1cc7d199089c8c2e75f53a93e",
   "devDependencies": {
     "resize-observer-polyfill": "^1.5.1"
   }

package/src/CdcChart.jsx

@@ -316,6 +316,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
     if (undefined === newConfig.table.show) newConfig.table.show = !isDashboard
 
+    newConfig.series.map(series => {
+      if (!series.tooltip) series.tooltip = true
+    })
+
     const processedConfig = { ...(await coveUpdateWorker(newConfig)) }
 
     updateConfig(processedConfig, data)
@@ -393,7 +397,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.seriesKeys = newConfig.series
         ? newConfig.series.map(series => {
             newConfig.runtime.seriesLabels[series.dataKey] = series.label || series.dataKey
-            newConfig.runtime.seriesLabelsAll.push(series.label || series.dataKey)
+            newConfig.runtime.seriesLabelsAll.push(series.name || series.label || series.dataKey)
             return series.dataKey
           })
         : []
@@ -565,10 +569,11 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       })
     }
 
-    if (((newConfig.visualizationType === 'Bar' || newConfig.visualizationType === 'Deviation Bar') && newConfig.orientation === 'horizontal') || newConfig.visualizationType === 'Paired Bar') {
+    if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar'].includes(newConfig.visualizationType)) {
       newConfig.runtime.xAxis = newConfig.yAxis
       newConfig.runtime.yAxis = newConfig.xAxis
       newConfig.runtime.horizontal = true
+      newConfig.orientation = 'horizontal'
     } else {
       newConfig.runtime.xAxis = newConfig.xAxis
       newConfig.runtime.yAxis = newConfig.yAxis
@@ -794,6 +799,21 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     } else {
       newSeriesHighlight.push(newHighlight)
     }
+
+    /**
+     * pushDataKeyBySeriesName
+     * - pushes series.dataKey into the series highlight based on the found series.name
+     * @param {String} value
+     */
+    const pushDataKeyBySeriesName = value => {
+      let matchingSeries = config.series.filter(series => series.name === value.text)
+      if (matchingSeries?.length > 0) {
+        newSeriesHighlight.push(matchingSeries[0].dataKey)
+      }
+    }
+
+    pushDataKeyBySeriesName(label)
+
     setSeriesHighlight(newSeriesHighlight)
   }
 
@@ -852,8 +872,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return num + unit
   }
 
-  // Format numeric data based on settings in config
-  const formatNumber = (num, axis, shouldAbbreviate = false) => {
+  // Format numeric data based on settings in config OR from passed in settings for Additional Columns
+  const formatNumber = (num, axis, shouldAbbreviate = false, addColPrefix, addColSuffix, addColRoundTo) => {
     // if num is NaN return num
     if (isNaN(num) || !num) return num
     // Check if the input number is negative
@@ -875,10 +895,17 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     let original = num
     let stringFormattingOptions
     if (axis === 'left') {
+      let roundToPlace
+      if (addColRoundTo !== undefined) {
+        // if its an Additional Column
+        roundToPlace = addColRoundTo ? Number(addColRoundTo) : 0
+      } else {
+        roundToPlace = roundTo ? Number(roundTo) : 0
+      }
       stringFormattingOptions = {
-        useGrouping: config.dataFormat.commas ? true : false,
-        minimumFractionDigits: roundTo ? Number(roundTo) : 0,
-        maximumFractionDigits: roundTo ? Number(roundTo) : 0
+        useGrouping: addColRoundTo ? true : config.dataFormat.commas ? true : false,
+        minimumFractionDigits: roundToPlace,
+        maximumFractionDigits: roundToPlace
       }
     }
 
@@ -937,8 +964,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       num = abbreviateNumber(parseFloat(num))
     }
 
-    if (prefix && axis === 'left') {
-      result += prefix
+    if (addColPrefix && axis === 'left') {
+      result = addColPrefix + result
+    } else {
+      if (prefix && axis === 'left') {
+        result = prefix + result
+      }
     }
 
     if (rightPrefix && axis === 'right') {
@@ -951,8 +982,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
     result += num
 
-    if (suffix && axis === 'left') {
-      result += suffix
+    if (addColSuffix && axis === 'left') {
+      result += addColSuffix
+    } else {
+      if (suffix && axis === 'left') {
+        result += suffix
+      }
     }
 
     if (rightSuffix && axis === 'right') {
@@ -1141,10 +1176,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {config?.introText && <section className='introText'>{parse(config.introText)}</section>}
             <div
               style={{ marginBottom: config.legend.position !== 'bottom' && config.orientation === 'horizontal' ? `${config.runtime.xAxis.size}px` : '0px' }}
-              className={`chart-container  ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
+              className={`chart-container  p-relative ${config.legend.position === 'bottom' ? 'bottom' : ''}${config.legend.hide ? ' legend-hidden' : ''}${lineDatapointClass}${barBorderClass} ${contentClasses.join(' ')}`}
             >
               {/* All charts except sparkline */}
-              {config.visualizationType !== 'Spark Line' && chartComponents[visualizationType]}
+              {config.visualizationType !== 'Spark Line' && chartComponents[config.visualizationType]}
 
               {/* Sparkline */}
               {config.visualizationType === 'Spark Line' && (
@@ -1181,9 +1216,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 config={config}
                 rawData={config.data}
                 runtimeData={filteredData || excludedData}
-                //navigationHandler={navigationHandler}
+                //navigationHandler={navigationHandler} // do we need this? What does it do?
                 expandDataTable={config.table.expanded}
-                //headerColor={general.headerColor}
+                //headerColor={general.headerColor} // have this in map but not chart
                 columns={config.columns}
                 showDownloadButton={config.general.showDownloadButton}
                 runtimeLegend={dynamicLegendItems}
@@ -1204,6 +1239,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
                 outerContainerRef={outerContainerRef}
                 imageRef={imageId}
                 isDebug={isDebug}
+                isEditor={isEditor}
               />
             )}
             {config?.footnotes && <section className='footnotes'>{parse(config.footnotes)}</section>}
@@ -1217,7 +1253,12 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   const getXAxisData = d => (config.runtime.xAxis.type === 'date' ? parseDate(d[config.runtime.originalXAxis.dataKey]).getTime() : d[config.runtime.originalXAxis.dataKey])
   const getYAxisData = (d, seriesKey) => d[seriesKey]
 
+  const capitalize = str => {
+    return str.charAt(0).toUpperCase() + str.slice(1)
+  }
+
   const contextValues = {
+    capitalize,
     getXAxisData,
     getYAxisData,
     config,

package/src/components/AreaChart.jsx

@@ -1,126 +1,27 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, memo } from 'react'
 
 // cdc
 import ConfigContext from '../ConfigContext'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
-import { colorPalettesChart } from '@cdc/core/data/colorPalettes'
 
 // visx & d3
 import * as allCurves from '@visx/curve'
 import { AreaClosed, LinePath, Bar } from '@visx/shape'
 import { Group } from '@visx/group'
-import { useTooltip, useTooltipInPortal, defaultStyles, Tooltip } from '@visx/tooltip'
-import { localPoint } from '@visx/event'
-import { bisector } from 'd3-array'
 
-const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
+const AreaChart = ({ xScale, yScale, yMax, xMax, chartRef, handleTooltipMouseOver, handleTooltipMouseOff, tooltipData }) => {
   // enable various console logs in the file
   const DEBUG = false
-  const [chartPosition, setChartPosition] = useState(null)
-
-  useEffect(() => {
-    setChartPosition(chartRef.current.getBoundingClientRect())
-  }, [chartRef])
 
   // import data from context
-  const { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale } = useContext(ConfigContext)
-  const tooltip_id = `cdc-open-viz-tooltip-${config.runtime.uniqueId}`
-
-  // import tooltip helpers
-  const { tooltipData, showTooltip, hideTooltip } = useTooltip()
-
-  // here we're inside of the svg,
-  // it appears we need to use TooltipInPortal.
-  const { TooltipInPortal } = useTooltipInPortal({
-    detectBounds: true,
-    // when tooltip containers are scrolled, this will correctly update the Tooltip position
-    scroll: true
-  })
+  const { transformedData: data, config, handleLineType, parseDate, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
 
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return
-  let barThickness = xMax / data.length
-
-  // Tooltip helper for getting data to the closest date/category hovered.
-  const getXValueFromCoordinate = x => {
-    if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
-      let eachBand = xScale.step()
-      let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
-    }
-
-    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
-      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(x)
-      const index = bisectDate(config.data, x0, 1)
-      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
-      return val
-    }
-  }
-
-  const handleMouseOver = (e, data) => {
-    // get the svg coordinates of the mouse
-    // and get the closest values
-    const eventSvgCoords = localPoint(e)
-    const { x, y } = eventSvgCoords
-
-    let closestXScaleValue = getXValueFromCoordinate(x)
-    let formattedDate = formatDate(closestXScaleValue)
-
-    let yScaleValues
-    if (config.xAxis.type === 'categorical') {
-      yScaleValues = data.filter(d => d[config.xAxis.dataKey] === closestXScaleValue)
-    } else {
-      yScaleValues = data.filter(d => formatDate(parseDate(d[config.xAxis.dataKey])) === formattedDate)
-    }
-
-    let seriesToInclude = []
-    let yScaleMaxValues = []
-    let itemsToLoop = [config.runtime.xAxis.dataKey, ...config.runtime.seriesKeys]
-
-    itemsToLoop.map(seriesKey => {
-      if (!seriesKey) return
-      if (!yScaleValues[0]) return
-      for (const item of Object.entries(yScaleValues[0])) {
-        if (item[0] === seriesKey) {
-          // let userUpdatedSeriesName = config.series.filter(series => series.dataKey === item[0])?.[0]?.name
-          // if (userUpdatedSeriesName) item[0] = userUpdatedSeriesName
-
-          seriesToInclude.push(item)
-        }
-      }
-    })
-
-    // filter out the series that aren't added to the map.
-    seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
-    if (!seriesToInclude) return
-
-    let tooltipDataFromSeries = Object.fromEntries(seriesToInclude) ? Object.fromEntries(seriesToInclude) : {}
-
-    let tooltipData = {}
-    tooltipData.data = tooltipDataFromSeries
-    tooltipData.dataXPosition = x + 20
-    tooltipData.dataYPosition = y - 100
-
-    let tooltipInformation = {
-      tooltipData: tooltipData,
-      tooltipTop: 0,
-      tooltipValues: yScaleValues,
-      tooltipLeft: x
-    }
-
-    showTooltip(tooltipInformation)
-  }
-
-  const TooltipListItem = ({ item }) => {
-    const [label, value] = item
-    return label === config.xAxis.dataKey ? `${label}: ${value}` : `${label}: ${formatNumber(value, 'left')}`
-  }
 
   const handleX = d => {
-    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey])) : xScale(d[config.xAxis.dataKey])
+    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])
   }
 
   const handleY = (d, index, s = undefined) => {
@@ -148,6 +49,7 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
             } else {
               data.map(d => xScale(d[config.xAxis.dataKey]))
             }
+
             return (
               <React.Fragment key={index}>
                 {/* prettier-ignore */}
@@ -174,52 +76,39 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax, chartRef }) => {
                   yScale={yScale}
                   curve={curveType}
                   strokeDasharray={s.type ? handleLineType(s.type) : 0}
-                  />
-
-                {/* Transparent bar for tooltips */}
-                {/* prettier-ignore */}
-                <Bar
-                  width={ Number(xMax)}
-                  height={ Number(yMax)}
-                  fill={DEBUG ? 'red' : 'transparent'}
-                  fillOpacity={0.05}
-                  style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}}
-                  onMouseMove={e => handleMouseOver(e, data)}
-                  onMouseOut={hideTooltip}
-                  />
+                />
 
                 {/* circles that appear on hover */}
-                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
+                {/* {tooltipData && Object.entries(tooltipData.data).length > 0 && (
                   <circle
                     cx={config.xAxis.type === 'categorical' ? xScale(tooltipData.data[config.xAxis.dataKey]) : xScale(parseDate(tooltipData.data[config.xAxis.dataKey]))}
-                    cy={yScale(tooltipData.data[s.dataKey])}
+                    cy={yScale(tooltipData.data[index][1])}
                     r={4.5}
                     opacity={1}
                     fillOpacity={1}
                     fill={displayArea ? (colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000') : 'transparent'}
                     style={{ filter: 'unset', opacity: 1 }}
                   />
-                )}
-
-                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
-                  <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition + chartPosition?.top} left={tooltipData.dataXPosition + chartPosition?.left} style={defaultStyles}>
-                    <ul style={{ listStyle: 'none', paddingLeft: 'unset', fontFamily: 'sans-serif', margin: 'auto', lineHeight: '1rem' }} data-tooltip-id={tooltip_id}>
-                      {typeof tooltipData === 'object' &&
-                        Object.entries(tooltipData.data).map(item => (
-                          <li style={{ padding: '2.5px 0' }}>
-                            <TooltipListItem item={item} />
-                          </li>
-                        ))}
-                    </ul>
-                  </TooltipInPortal>
-                )}
+                )} */}
               </React.Fragment>
             )
           })}
+
+          {/* Transparent bar for tooltips */}
+          {/* prettier-ignore */}
+          <Bar
+            width={ Number(xMax)}
+            height={ Number(yMax)}
+            fill={DEBUG ? 'red' : 'transparent'}
+            fillOpacity={0.05}
+            style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}}
+            onMouseMove={e => handleTooltipMouseOver(e, rawData)}
+            onMouseLeave={ handleTooltipMouseOff }
+            />
         </Group>
       </ErrorBoundary>
     )
   )
 }
 
-export default CoveAreaChart
+export default memo(AreaChart)

package/src/components/BarChart.jsx

@@ -1,15 +1,14 @@
 import React, { useContext, useState, useEffect } from 'react'
 import { Group } from '@visx/group'
-import { BarGroup, BarStack } from '@visx/shape'
+import { BarGroup, BarStack, Bar } from '@visx/shape'
 import { Text } from '@visx/text'
 import chroma from 'chroma-js'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
-import { act } from 'react-dom/test-utils'
 
-export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
+const BarChart = ({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible, handleTooltipMouseOver, handleTooltipMouseOff, handleTooltipClick }) => {
   const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, tableData, formatDate, isNumber, getTextWidth, parseDate, setSharedFilter, setSharedFilterValue, dashboardConfig } = useContext(ConfigContext)
   const { HighLightedBarUtils } = useHighlightedBars(config)
   const { orientation, visualizationSubType } = config
@@ -64,7 +63,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
       if (!colorMap.has(values[i])) {
         colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
       }
-      // push the colosr to the result array
+      // push the color to the result array
       result.push(colorMap.get(values[i]))
     }
     return result
@@ -172,11 +171,17 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                   }
 
-                  const tooltip = `<div>
-                  ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
+                  const {
+                    legend: { showLegendValuesTooltip },
+                    runtime: { seriesLabels }
+                  } = config
+
+                  const barStackTooltip = `<div>
+                  <p class="tooltip-heading"><strong>${xAxisTooltip}</strong></p>
+                  ${showLegendValuesTooltip && seriesLabels && hasMultipleSeries ? `${seriesLabels[bar.key] || ''}<br/>` : ''}
                   ${yAxisTooltip}<br />
-                  ${xAxisTooltip}
                     </div>`
+
                   return (
                     <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
                       <style>
@@ -201,7 +206,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           style={{ background: bar.color, border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}
                           opacity={transparentBar ? 0.5 : 1}
                           display={displayBar ? 'block' : 'none'}
-                          data-tooltip-html={tooltip}
+                          data-tooltip-html={barStackTooltip}
                           data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                           onClick={e => {
                             e.preventDefault()
@@ -444,17 +449,17 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                       let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                       if (!hasMultipleSeries && config.runtime.horizontal) {
-                        xAxisTooltip = config.isLegendValue ? `${bar.key}: ${xAxisValue}` : config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
+                        xAxisTooltip = config.isLegendValue ? `<p className="tooltip-heading">${bar.key}: ${xAxisValue}</p>` : config.runtime.xAxis.label ? `<p className="tooltip-heading">${config.runtime.xAxis.label}: ${xAxisValue}</p>` : xAxisValue
                       }
                       if (!hasMultipleSeries && !config.runtime.horizontal) {
                         yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
                       }
 
-                      const tooltip = `<div>
+                      const tooltip = `<ul>
                       ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
-                      ${yAxisTooltip}<br />
-                      ${xAxisTooltip}
-                        </div>`
+                      <li class="tooltip-heading">${yAxisTooltip}</li>
+                      <li class="tooltip-body">${xAxisTooltip}</li>
+                        </li></ul>`
 
                       const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
                       const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
@@ -467,7 +472,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
                         if (isHighlightedBar) return 'transparent'
                         // loop through shared filters and get active values
-                        if (dashboardConfig && dashboardConfig?.dashboard.sharedFilters?.length > 0) {
+                        /* if (dashboardConfig && dashboardConfig?.dashboard.sharedFilters?.length > 0) {
                           let activeFilters = []
                           let backgroundColor = barColor
 
@@ -500,7 +505,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           }
                           checkForResetValue()
                           return backgroundColor
-                        }
+                        } */
                         return barColor
                       }
 
@@ -674,7 +679,12 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
               : ''}
           </Group>
         )}
+
+        {/* tooltips */}
+        {orientation !== 'horizontal' && <Bar key={'bars'} width={Number(xMax)} height={Number(yMax)} fill={false ? 'red' : 'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, data)} onMouseOut={handleTooltipMouseOff} onClick={e => handleTooltipClick(e, data)} />}
       </Group>
     </ErrorBoundary>
   )
 }
+
+export default BarChart

package/src/components/DataTable.jsx

@@ -13,11 +13,12 @@ import ConfigContext from '../ConfigContext'
 import MediaControls from '@cdc/core/components/MediaControls'
 
 export default function DataTable() {
-  const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes } = useContext(ConfigContext)
+  const { rawData, tableData: data, config, colorScale, parseDate, formatDate, formatNumber: numberFormatter, colorPalettes, currentViewport } = useContext(ConfigContext)
 
   const section = config.orientation === 'horizontal' ? 'yAxis' : 'xAxis'
   const [tableExpanded, setTableExpanded] = useState(config.table.expanded)
   const [accessibilityLabel, setAccessibilityLabel] = useState('')
+  const isLegendBottom = ['sm', 'xs', 'xxs'].includes(currentViewport)
 
   const DownloadButton = ({ data }, type) => {
     const fileName = `${config.title.substring(0, 50)}.csv`
@@ -145,6 +146,8 @@ export default function DataTable() {
               if (rightSeriesItem.dataKey === row.original) resolvedAxis = 'right'
             })
 
+            if (config.visualizationType !== 'Combo') resolvedAxis = 'left'
+
             return <>{numberFormatter(d[row.original], resolvedAxis)}</>
           },
           id: `${d[config.runtime.originalXAxis.dataKey]}--${index}`,
@@ -233,7 +236,7 @@ export default function DataTable() {
         {config.table.download && <DownloadButton data={rawData} type='link' />}
       </MediaControls.Section>
 
-      <section id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
+      <section style={{ marginTop: !isLegendBottom ? config.dynamicMarginTop + 'px' : '0px' }} id={config?.title ? `dataTableSection__${config?.title.replace(/\s/g, '')}` : `dataTableSection`} className={`data-table-container`} aria-label={accessibilityLabel}>
         <div
           role='button'
           className={tableExpanded ? 'data-table-heading' : 'collapsed data-table-heading'}