@cdc/chart 4.23.10 → 4.23.11

package/src/components/AreaChart.Stacked.jsx

@@ -10,10 +10,10 @@ import { Bar, AreaStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 
-const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, isBrush }) => {
+const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug }) => {
   // import data from context
-  let { transformedData: data, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
-
+  let { transformedData, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
   if (!data) return
@@ -60,9 +60,8 @@ const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver,
                 })
               }}
             </AreaStack>
-
             {/* prettier-ignore */}
-            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={isDebug ? 'red' : 'transparent'} fillOpacity={0.05} style={isDebug ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
+            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'}   onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/AreaChart.jsx

@@ -11,17 +11,11 @@ import { Group } from '@visx/group'
 import { bisector } from 'd3-array'
 
 const AreaChart = props => {
-  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, isBrush, brushData, children } = props
+  const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, children } = props
   // import data from context
-  let { transformedData: data, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+  let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
+  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
 
-  // use brush data if it is passed in AND if this is NOT a brush chart
-  data = !isBrush && undefined !== brushData && brushData.length ? brushData : data
-
-  if (isBrush && isDebug) console.log('###AREAchart BRUSH data, xScale, yScale, yMax, xMax', data, xScale, yScale, yMax, xMax)
-
-  // Draw transparent bars over the chart to get tooltip data
-  // Turn isDebug on for additional context.
   if (!data) return
 
   // Tooltip helper for getting data to the closest date/category hovered.
@@ -42,38 +36,19 @@ const AreaChart = props => {
     }
   }
 
-  const getXAxisDates = brushDataSet => {
-    if (undefined === brushDataSet || !brushDataSet) return
-    let XAxisBrushDates = []
-    brushDataSet.forEach(function convertDateTimeNumber(key, value, brushDataSet) {
-      let tmp = getXValueFromCoordinate(xScale(value))
-      let date = formatDate(tmp)
-      XAxisBrushDates.push(date)
-    })
-    return XAxisBrushDates
-  }
-
   const handleX = d => {
     return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])
   }
 
   const handleY = (d, index, s = undefined) => {
-    return isBrush ? yScale(d[s.dataKey]) / 4 : yScale(d[s.dataKey])
-  }
-
-  // prevents duplicate brush handles being rendered
-  const getFirstBrushHandleOnly = (children, index) => {
-    if (index === 0) {
-      return children
-    }
-    // else dont return the other brush handles
+    return yScale(d[s.dataKey])
   }
 
   return (
     data && (
       <svg>
         <ErrorBoundary component='AreaChart'>
-          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)} top={isBrush ? yMax * 1.3 : 0}>
+          <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
             {(config.runtime.areaSeriesKeys || config.series).map((s, index) => {
               let seriesData = data.map(d => {
                 return {
@@ -119,14 +94,10 @@ const AreaChart = props => {
                     curve={curveType}
                     strokeDasharray={s.type ? handleLineType(s.type) : 0}
                   />
-                  {getFirstBrushHandleOnly(children, index)}
                 </React.Fragment>
               )
             })}
-
-            {/* Transparent bar for tooltips - disable if AreaChart is a brush */}
-            {/* prettier-ignore */}
-            {!isBrush && <Bar width={Number(xMax)} height={Number(yMax)} fill={isDebug ? 'red' : 'transparent'} fillOpacity={0.05} style={isDebug ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />}
+            <Bar width={Number(xMax)} height={Number(yMax)} fill={'transparent'} fillOpacity={0.05} onMouseMove={e => handleTooltipMouseOver(e, rawData)} onMouseLeave={handleTooltipMouseOff} />
           </Group>
         </ErrorBoundary>
       </svg>

package/src/components/{BarChart.Horizontal.jsx → BarChart.Horizontal.tsx}

@@ -5,17 +5,49 @@ import { Group } from '@visx/group'
 import { Text } from '@visx/text'
 import { BarGroup } from '@visx/shape'
 import { useHighlightedBars } from '../hooks/useHighlightedBars'
+import { FaStar } from 'react-icons/fa'
 
 // third party
 import chroma from 'chroma-js'
 
-export const BarChartHorizontal = props => {
+import { type BarChartProps } from '../types/ChartProps'
+
+export const BarChartHorizontal = (props: BarChartProps) => {
   const { xScale, yScale, yMax, seriesScale } = props
   const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, hasMultipleSeries, applyRadius, updateBars, assignColorsToValues, section, fontSize, isLabelBelowBar, displayNumbersOnBar, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue } = useBarChart()
+  const {
+    isHorizontal,
+    barBorderWidth,
+    applyRadius,
+    updateBars,
+    assignColorsToValues,
+    section,
+    fontSize,
+    isLabelBelowBar,
+    displayNumbersOnBar,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    getHighlightedBarColorByValue,
+    getHighlightedBarByValue,
+    generateIconSize,
+    getAdditionalColumn,
+    hoveredBar,
+    onMouseLeaveBar,
+    onMouseOverBar
+  } = useBarChart()
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
-
+  const getIcon = (bar, barWidth) => {
+    let icon = null
+    const iconSize = generateIconSize(barWidth)
+    config.suppressedData?.forEach(d => {
+      if (bar.key === d.column && String(bar.value) === String(d.value) && d.icon) {
+        icon = <FaStar color='#000' size={iconSize} />
+        // icon = <BarIcon color='#000' size={fontSize[config.fontSize] / 1.7} />
+      }
+    })
+    return icon
+  }
   return (
     config.visualizationSubType !== 'stacked' &&
     config.visualizationType === 'Bar' &&
@@ -40,21 +72,24 @@ export const BarChartHorizontal = props => {
                   const scaleVal = config.useLogScale ? 0.1 : 0
 
                   let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
-
                   highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
-
                   let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                   let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
                   let barHeight = config.barHeight
-                  let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
-                  const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(0)
+                  let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(scaleVal)
+                  const barXBase = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(scaleVal))
-                  const barWidth = config.barHeight
+                  const suppresedBarWidth = 25
+                  const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
+                  let barWidth = bar.value && config.suppressedData.some(({ column, value }) => bar.key === column && bar.value === value) ? suppresedBarWidth : barWidthHorizontal
 
+                  const supprssedBarX = isPositiveBar ? xScale(0) : xScale(scaleVal) - suppresedBarWidth
+                  const barX = config.suppressedData.some(d => bar.key === d.column && String(bar.value) === String(d.value)) ? supprssedBarX : barXBase
                   const yAxisValue = formatNumber(bar.value, 'left')
                   const xAxisValue = config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
-                  const barPosition = bar.value < 0 ? 'below' : 'above'
+                  const barPosition = !isPositiveBar ? 'below' : 'above'
+                  const barValueLabel = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
                   let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
@@ -79,16 +114,13 @@ export const BarChartHorizontal = props => {
                   const newIndex = bar.value < 0 ? -1 : index
                   const borderRadius = applyRadius(newIndex)
 
-                  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) {
-                    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
-                  }
-
+                  let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${xAxisValue}` : xAxisValue
+                  const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                  const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
                   const tooltip = `<ul>
-                  ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
-                  <li class="tooltip-heading">${yAxisTooltip}</li>
-                  <li class="tooltip-body">${xAxisTooltip}</li>
+                  <li class="tooltip-heading"">${yAxisTooltip}</li>
+                  <li class="tooltip-body ">${tooltipBody}</li>
+                  <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
                   // configure colors
@@ -103,23 +135,49 @@ export const BarChartHorizontal = props => {
                   const highlightedBar = getHighlightedBarByValue(yAxisValue)
                   const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
+                  const displaylollipopShape = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? 'none' : 'block'
                   // update label color
                   if (barColor && labelColor) {
                     if (chroma.contrast(labelColor, barColor) < 4.9) {
                       labelColor = textFits ? '#FFFFFF' : '#000000'
                     }
                   }
+                  const getTop = () => {
+                    if (Number(barHeight) < 20) return -4
+                    if (Number(barHeight) < 25) return -1
+                    if (Number(barHeight) < 30) return 2
+                    if (Number(barHeight) < 35) return 4
+                    if (Number(barHeight) < 40) return 5
+                    if (Number(barHeight) < 50) return 9
+                    if (Number(barHeight) < 60) return 10
+                    else {
+                      return 12
+                    }
+                  }
+                  const iconStyle: { [key: string]: any } = {
+                    position: 'absolute',
+                    top: getTop(),
+                    left: suppresedBarWidth * 1.2
+                  }
+
+                  if (config.isLollipopChart) {
+                    iconStyle.top = -9
+                  }
                   const background = () => {
                     if (isRegularLollipopColor) return barColor
                     if (isTwoToneLollipopColor) return chroma(barColor).brighten(1)
                     if (isHighlightedBar) return 'transparent'
                     return barColor
                   }
+
                   const finalStyle = {
                     background: background(),
                     borderColor,
                     borderStyle: 'solid',
                     borderWidth,
+                    width: barWidth,
+                    transition: 'all 0.2s linear',
+                    height: !config.isLollipopChart ? barHeight : lollipopBarWidth,
                     ...borderRadius
                   }
 
@@ -128,22 +186,24 @@ export const BarChartHorizontal = props => {
                       {/* This feels gross but inline transition was not working well*/}
                       <style>
                         {`
-                        .linear #barGroup${barGroup.index},
-                        .Combo #barGroup${barGroup.index} {
+                        .linear #barGroup${barGroup.index} div,
+                        .Combo #barGroup${barGroup.index} div {
                           transform-origin: 0 ${barY + barHeight}px;
                         }
                       `}
                       </style>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
                         <foreignObject
+                          onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
+                          onMouseLeave={onMouseLeaveBar}
                           id={`barGroup${barGroup.index}`}
                           key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
                           x={barX}
-                          y={barWidth * bar.index}
-                          width={barWidthHorizontal}
-                          height={!config.isLollipopChart ? barWidth : lollipopBarWidth}
-                          style={finalStyle}
-                          opacity={transparentBar ? 0.5 : 1}
+                          style={{ overflow: 'visible', ...finalStyle }}
+                          y={barHeight * bar.index}
+                          height={!config.isLollipopChart ? barHeight : lollipopBarWidth}
+                          width={barWidth}
+                          opacity={transparentBar ? 0.2 : 1}
                           display={displayBar ? 'block' : 'none'}
                           data-tooltip-html={tooltip}
                           data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -154,7 +214,13 @@ export const BarChartHorizontal = props => {
                               setSharedFilter(config.uid, bar)
                             }
                           }}
-                        ></foreignObject>
+                        >
+                          <div style={{ position: 'relative' }}>
+                            <div style={iconStyle}>{getIcon(bar, barWidth)}</div>
+                            <div style={{ ...finalStyle }}></div>
+                          </div>
+                        </foreignObject>
+
                         {!config.isLollipopChart && displayNumbersOnBar && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
@@ -165,7 +231,7 @@ export const BarChartHorizontal = props => {
                             verticalAnchor='middle'
                             textAnchor={textAnchor}
                           >
-                            {yAxisValue}
+                            {barValueLabel}
                           </Text>
                         )}
                         {config.isLollipopChart && displayNumbersOnBar && (
@@ -179,7 +245,7 @@ export const BarChartHorizontal = props => {
                             verticalAnchor='middle'
                             fontWeight={'normal'}
                           >
-                            {yAxisValue}
+                            {barValueLabel}
                           </Text>
                         )}
                         {isLabelBelowBar && !config.yAxis.hideLabel && (
@@ -193,10 +259,21 @@ export const BarChartHorizontal = props => {
                         )}
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
-                          <circle cx={bar.y} cy={0 + lollipopBarWidth / 2} r={lollipopShapeSize / 2} fill={barColor} key={`circle--${bar.index}`} data-tooltip-html={tooltip} data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`} style={{ filter: 'unset', opacity: 1 }} />
+                          <circle
+                            display={displaylollipopShape}
+                            cx={bar.y}
+                            cy={0 + lollipopBarWidth / 2}
+                            r={lollipopShapeSize / 2}
+                            fill={barColor}
+                            key={`circle--${bar.index}`}
+                            data-tooltip-html={tooltip}
+                            data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
+                            style={{ filter: 'unset', opacity: 1 }}
+                          />
                         )}
                         {config.isLollipopChart && config.lollipopShape === 'square' && (
                           <rect
+                            display={displaylollipopShape}
                             x={bar.y > 10 ? bar.y - lollipopShapeSize / 2 : 0}
                             y={0 - lollipopBarWidth / 2}
                             width={lollipopShapeSize}

package/src/components/{BarChart.StackedHorizontal.jsx → BarChart.StackedHorizontal.tsx}

@@ -8,10 +8,12 @@ import { Text } from '@visx/text'
 // third party
 import chroma from 'chroma-js'
 
-const BarChartStackedHorizontal = props => {
+import { type BarChartProps } from '../types/ChartProps'
+
+const BarChartStackedHorizontal = (props: BarChartProps) => {
   const { xScale, yScale, xMax, yMax } = props
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, animatedChart, getTextWidth } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, hasMultipleSeries, applyRadius, updateBars, isLabelBelowBar, displayNumbersOnBar, fontSize } = useBarChart()
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, animatedChart, getTextWidth, setSeriesHighlight } = useContext(ConfigContext)
+  const { isHorizontal, barBorderWidth, hasMultipleSeries, applyRadius, updateBars, isLabelBelowBar, displayNumbersOnBar, fontSize, getAdditionalColumn, hoveredBar, onMouseLeaveBar, onMouseOverBar } = useBarChart()
   const { orientation, visualizationSubType } = config
 
   return (
@@ -31,18 +33,17 @@ const BarChartStackedHorizontal = props => {
                 const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
                 const style = applyRadius(barStack.index)
                 let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-                let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                 let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
-                if (!hasMultipleSeries) {
-                  xAxisTooltip = config.isLegendValue ? `${bar.key}: ${xAxisValue}` : config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisTooltip
-                }
-                const tooltip = `<div>
-                    ${config.legend.showLegendValuesTooltip && config.runtime.seriesLabels && hasMultipleSeries ? `${config.runtime.seriesLabels[bar.key] || ''}<br/>` : ''}
-                    ${yAxisTooltip}<br />
-                    ${xAxisTooltip}
-                      </div>`
 
-                if (chroma.contrast(labelColor, bar.color) < 4.9) {
+                const additionalColTooltip = getAdditionalColumn(hoveredBar)
+                const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
+                const tooltip = `<ul>
+                  <li class="tooltip-heading"">${yAxisTooltip}</li>
+                  <li class="tooltip-body ">${tooltipBody}</li>
+                  <li class="tooltip-body ">${additionalColTooltip}</li>
+                    </li></ul>`
+
+                if (chroma.contrast(labelColor, colorScale(config.runtime.seriesLabels[bar.key])) < 4.9) {
                   labelColor = '#FFFFFF'
                 }
 
@@ -51,7 +52,7 @@ const BarChartStackedHorizontal = props => {
                     <style>
                       {`
                          #barStack${barStack.index}-${bar.index} rect,
-                         #barStack${barStack.index}-${bar.index} foreignObject{
+                         #barStack${barStack.index}-${bar.index} foreignObject div{
                           animation-delay: ${barStack.index * 0.5}s;
                           transform-origin: ${bar.x}px
                         }
@@ -59,14 +60,16 @@ const BarChartStackedHorizontal = props => {
                     </style>
                     <Group key={index} id={`barStack${barStack.index}-${bar.index}`} className='stack horizontal'>
                       <foreignObject
+                        onMouseOver={() => onMouseOverBar(yAxisValue, bar.key)}
+                        onMouseLeave={onMouseLeaveBar}
                         key={`barstack-horizontal-${barStack.index}-${bar.index}-${index}`}
                         className={`animated-chart group ${animatedChart ? 'animated' : ''}`}
                         x={bar.x}
                         y={bar.y}
+                        style={{ transition: 'all 0.2s linear' }}
                         width={bar.width}
                         height={bar.height}
-                        style={{ background: bar.color, border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}
-                        opacity={transparentBar ? 0.5 : 1}
+                        opacity={transparentBar ? 0.2 : 1}
                         display={displayBar ? 'block' : 'none'}
                         data-tooltip-html={tooltip}
                         data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
@@ -77,7 +80,9 @@ const BarChartStackedHorizontal = props => {
                             setSharedFilter(config.uid, bar)
                           }
                         }}
-                      ></foreignObject>
+                      >
+                        <div style={{ width: bar.width, height: bar.height, background: colorScale(config.runtime.seriesLabels[bar.key]), border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}></div>
+                      </foreignObject>
 
                       {orientation === 'horizontal' && visualizationSubType === 'stacked' && isLabelBelowBar && barStack.index === 0 && !config.yAxis.hideLabel && (
                         <Text

package/src/components/{BarChart.StackedVertical.jsx → BarChart.StackedVertical.tsx}

@@ -4,12 +4,14 @@ import { useBarChart } from '../hooks/useBarChart'
 import { BarStack } from '@visx/shape'
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
+import { type BarChartProps } from '../types/ChartProps'
 
-const BarChartStackedVertical = props => {
+const BarChartStackedVertical = (props: BarChartProps) => {
   const { xScale, yScale, xMax, yMax } = props
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
-  const { isHorizontal, barBorderWidth, hasMultipleSeries, applyRadius } = useBarChart()
+  const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
+  const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar } = useBarChart()
   const { orientation } = config
+  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
 
   return (
     config.visualizationSubType === 'stacked' &&
@@ -26,33 +28,23 @@ const BarChartStackedVertical = props => {
               // tooltips
               const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.xAxis.dataKey])) : data[bar.index][config.runtime.xAxis.dataKey]
               const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
-
-              if(!yAxisValue) return <></>
-
+              if (!yAxisValue) return
               const style = applyRadius(barStack.index)
-              let yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
               const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
-              if (!hasMultipleSeries) {
-                yAxisTooltip = config.isLegendValue ? `${bar.key}: ${yAxisValue}` : config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-              }
-
-              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 />
-                      </div>`
+              const additionalColTooltip = getAdditionalColumn(hoveredBar)
+              const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
+              const tooltip = `<ul>
+                  <li class="tooltip-heading"">${xAxisTooltip}</li>
+                  <li class="tooltip-body ">${tooltipBody}</li>
+                  <li class="tooltip-body ">${additionalColTooltip}</li>
+                    </li></ul>`
 
               return (
                 <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
                   <style>
                     {`
                            #barStack${barStack.index}-${bar.index} rect,
-                           #barStack${barStack.index}-${bar.index} foreignObject{
+                           #barStack${barStack.index}-${bar.index} foreignObject div{
                             animation-delay: ${barStack.index * 0.5}s;
                             transform-origin: ${barThicknessAdjusted / 2}px ${bar.y + bar.height}px
                           }
@@ -63,15 +55,15 @@ const BarChartStackedVertical = props => {
                       {yAxisValue}
                     </Text>
                     <foreignObject
+                      onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
+                      onMouseLeave={onMouseLeaveBar}
                       key={`bar-stack-${barStack.index}-${bar.index}`}
                       x={barThickness * bar.index + offset}
                       y={bar.y}
                       width={barThicknessAdjusted}
                       height={bar.height}
-                      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={barStackTooltip}
+                      data-tooltip-html={tooltip}
                       data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                       onClick={e => {
                         e.preventDefault()
@@ -80,7 +72,11 @@ const BarChartStackedVertical = props => {
                           setSharedFilter(config.uid, bar)
                         }
                       }}
-                    ></foreignObject>
+                    >
+                      <div
+                        style={{ transition: 'all 0.2s linear', opacity: transparentBar ? 0.2 : 1, width: barThicknessAdjusted, height: bar.height, background: colorScale(config.runtime.seriesLabels[bar.key]), border: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`, ...style }}
+                      ></div>
+                    </foreignObject>
                   </Group>
                 </Group>
               )