@cdc/chart 4.24.5 → 4.24.7

package/src/components/Annotations/components/findNearestDatum.ts

@@ -0,0 +1,138 @@
+import { timeParse } from 'd3-time-format'
+
+const getXValueFromCoordinate = (x, isClick = false) => {
+  if (visualizationType === 'Pie') return
+  if (orientation === 'horizontal') return
+
+  // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
+  if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
+    let range = xScale.range()[1] - xScale.range()[0]
+    let eachBand = range / (xScale.domain().length + 1)
+
+    let numerator = x
+    const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
+    return xScale.domain()[index] // fixes off by 1 error
+  }
+
+  if (config.xAxis.type === 'date') {
+    const xValue = x // Assuming x is the coordinate on the chart
+    const xTimestamp = convertXValueToTimestamp(x, 0, xMax, xScale.domain())
+
+    // Calculate the closest date to the x coordinate
+    let closestDate = null
+    let minDistance = Number.MAX_VALUE
+
+    xScale.domain().forEach(timestamp => {
+      const distance = Math.abs(xTimestamp - timestamp)
+      if (distance < minDistance) {
+        minDistance = distance
+        closestDate = timestamp
+      }
+    })
+
+    return closestDate
+  }
+
+  return x
+}
+
+const findNearestDatum = ({ data, xScale, yScale, config, xMax, annotationSeriesKey }, xPosition) => {
+  const { xAxis, visualizationType, orientation } = config
+
+  const convertXValueToTimestamp = (xValue, minX, maxX, domain, xScale) => {
+    let ticks = []
+    if (config.xAxis.type === 'date-time') {
+      minX = new Date(minX)
+      maxX = new Date(maxX)
+      domain = domain.map(d => new Date(d))
+      ticks = xScale.ticks().map(d => new Date(d))
+    }
+
+    // Calculate the percentage position of xValue between minX and maxX
+    const percentage = (xValue - minX) / (maxX - minX)
+
+    // Calculate the index in the domain array corresponding to the percentage position
+    const index = Math.round(percentage * (domain.length - 1))
+
+    if (config.xAxis.type === 'date-time') {
+      return ticks[index]
+    }
+
+    // Return the timestamp from the domain array at the calculated index
+    return domain[index]
+  }
+
+  const getXValueFromCoordinate = (x, isClick = false) => {
+    if (visualizationType === 'Pie') return
+    if (orientation === 'horizontal') return
+
+    if (config.xAxis.type === 'date-time') {
+      // Calculate the percentage position of xValue between minX and maxX
+      const invertedValue = new Date(xScale.invert(x))
+      const ticks = config.data.map(d => new Date(d[config.xAxis.dataKey]).getTime())
+      let minDistance = Infinity
+      let closestDate = null
+
+      ticks.forEach(timestamp => {
+        const distance = Math.abs(invertedValue.getTime() - timestamp)
+        if (distance < minDistance) {
+          minDistance = distance
+          closestDate = timestamp
+        }
+      })
+
+      return new Date(closestDate).getTime()
+    }
+
+    // Check the type of x equal to point or if the type of xAxis is equal to continuous or date
+    if (config.xAxis.type === 'categorical' || (visualizationType === 'Combo' && orientation !== 'horizontal' && visualizationType !== 'Forest Plot')) {
+      const range = xScale.range()[1] - xScale.range()[0]
+      const eachBand = range / (xScale.domain().length + 1)
+
+      let numerator = x
+      const index = Math.floor((Number(numerator) - eachBand / 2) / eachBand)
+      return xScale.domain()[index] // fixes off by 1 error
+    }
+
+    if (config.xAxis.type === 'date') {
+      const xValue = x // Assuming x is the coordinate on the chart
+      const xTimestamp = convertXValueToTimestamp(x, 0, xMax, xScale.domain(), xScale)
+
+      // Calculate the closest date to the x coordinate
+      let closestDate = null
+      let minDistance = Number.MAX_VALUE
+
+      xScale.domain().forEach(timestamp => {
+        const distance = Math.abs(xTimestamp - timestamp)
+        if (distance < minDistance) {
+          minDistance = distance
+          closestDate = timestamp
+        }
+      })
+
+      return closestDate
+    }
+
+    return x
+  }
+
+  const xValue = getXValueFromCoordinate(xPosition - Number(config.yAxis.size || 0))
+
+  let closestSeries = []
+
+  if (!xValue) return { x: 0, y: 0 }
+
+  if (xAxis.type === 'categorical') {
+    closestSeries = config.data.filter(d => d[config.xAxis.dataKey] === xValue)
+  }
+
+  if (xAxis.type === 'date' || xAxis.type === 'date-time') {
+    closestSeries = config.data.filter(d => new Date(d[config.xAxis.dataKey]).getTime() === xValue)
+  }
+
+  const y = closestSeries[0][annotationSeriesKey] // Map each key to its corresponding value in data
+  const x = xValue
+  return { x, y }
+}
+
+export { findNearestDatum, getXValueFromCoordinate }

package/src/components/Annotations/components/helpers/index.tsx

@@ -0,0 +1,46 @@
+const applyBandScaleOffset = (num: number, config, xScale) => num + Number(config.yAxis.size) + xScale.bandwidth() / 2
+const handleConnectionHorizontalType = (annotation, xScale, config) => {
+  const { connectionLocation } = annotation
+  if (connectionLocation === 'right') return 'end'
+  if (connectionLocation === 'left') return 'start'
+  if (connectionLocation === 'bottom' || connectionLocation === 'top') return 'middle'
+  return xScale(annotation.xKey) + annotation.dx < config.yAxis.size ? 'middle' : null
+}
+
+const handleConnectionVerticalType = (annotation, xScale, config) => {
+  const { connectionLocation } = annotation
+  if (connectionLocation === 'top') return 'start'
+  if (connectionLocation === 'bottom') return 'end'
+  if (connectionLocation === 'right' || connectionLocation === 'left') return 'middle'
+  return xScale(annotation.xKey) + annotation.dx < config.yAxis.size ? 'end' : null
+}
+
+const handleMobileXPosition = (annotation, xScale, config) => {
+  if (annotation.snapToNearestPoint) {
+    return Number(annotation.dx) + xScale(annotation.xKey) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size)
+  }
+  return Number(annotation.x) + Number(annotation.dx)
+}
+
+const handleMobileYPosition = (annotation, yScale, config) => {
+  if (annotation.snapToNearestPoint) {
+    return yScale(annotation.yKey) + Number(annotation.dy)
+  }
+  return Number(annotation.dy) + Number(annotation.y)
+}
+
+const handleTextX = (annotation, xScale, config) => {
+  if (annotation.snapToNearestPoint) {
+    return Number(annotation.dx) + Number(xScale(annotation.xKey)) + (config.xAxis.type !== 'date-time' ? xScale.bandwidth() / 2 : 0) + Number(config.yAxis.size) - 16 / 3
+  }
+  return Number(annotation.dx) + Number(annotation.x) - 16 / 3
+}
+
+const handleTextY = (annotation, yScale, config) => {
+  if (annotation.snapToNearestPoint) {
+    return yScale(annotation.yKey) + Number(annotation.dy) + 5
+  }
+  return Number(annotation.y) + Number(annotation.dy) + 16 / 3
+}
+
+export { applyBandScaleOffset, handleConnectionHorizontalType, handleConnectionVerticalType, handleMobileXPosition, handleMobileYPosition, handleTextX, handleTextY }

package/src/components/Annotations/index.tsx

@@ -0,0 +1,13 @@
+import AnnotationDraggable from './components/AnnotationDraggable'
+import AnnotationList from './components/AnnotationList'
+import AnnotationDropdown from './components/AnnotationDropdown'
+
+const Annotation = {
+  Draggable: AnnotationDraggable,
+  // Mobile auto display
+  List: AnnotationList,
+  // Desktop Accessible Option
+  Dropdown: AnnotationDropdown
+}
+
+export default Annotation

package/src/components/AreaChart/components/AreaChart.Stacked.jsx

@@ -14,7 +14,7 @@ import { approvedCurveTypes } from '@cdc/core/helpers/lineChartHelpers'
 const AreaChartStacked = ({ xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug }) => {
   // import data from context
   let { transformedData, config, seriesHighlight, colorScale, rawData } = useContext(ConfigContext)
-  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+  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

package/src/components/AreaChart/components/AreaChart.jsx

@@ -15,7 +15,7 @@ const AreaChart = props => {
   const { xScale, yScale, yMax, xMax, handleTooltipMouseOver, handleTooltipMouseOff, isDebug, children } = props
   // import data from context
   let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData, brushConfig } = useContext(ConfigContext)
-  const data = config.brush.active && brushConfig.data?.length ? brushConfig.data : transformedData
+  const data = config.brush?.active && brushConfig.data?.length ? brushConfig.data : transformedData
 
   if (!data) return
 

package/src/components/BarChart/components/BarChart.Horizontal.tsx

@@ -13,6 +13,7 @@ import { BarGroup } from '@visx/shape'
 // CDC core components and helpers
 import { getContrastColor } from '@cdc/core/helpers/cove/accessibility'
 import createBarElement from '@cdc/core/components/createBarElement'
+import { getBarConfig, testZeroValue } from '../helpers'
 
 // Third party libraries
 import chroma from 'chroma-js'
@@ -24,25 +25,8 @@ import { ChartContext } from '../../../types/ChartContext'
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
   const { transformedData: data, tableData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter, isNumber, getTextWidth, getYAxisData, getXAxisData } = useContext<ChartContext>(ConfigContext)
-  const {
-    isHorizontal,
-    barBorderWidth,
-    updateBars,
-    assignColorsToValues,
-    section,
-    fontSize,
-    isLabelBelowBar,
-    displayNumbersOnBar,
-    lollipopBarWidth,
-    lollipopShapeSize,
-    getHighlightedBarColorByValue,
-    getHighlightedBarByValue,
-    getAdditionalColumn,
-    hoveredBar,
-    onMouseLeaveBar,
-    onMouseOverBar,
-    composeSuppressionBars
-  } = useBarChart()
+  const { isHorizontal, barBorderWidth, updateBars, assignColorsToValues, section, fontSize, isLabelBelowBar, displayNumbersOnBar, lollipopBarWidth, lollipopShapeSize, getHighlightedBarColorByValue, getHighlightedBarByValue, getAdditionalColumn, hoveredBar, onMouseLeaveBar, onMouseOverBar } =
+    useBarChart()
 
   const { HighLightedBarUtils } = useHighlightedBars(config)
 
@@ -68,8 +52,6 @@ export const BarChartHorizontal = () => {
               <Group className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`} key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} top={barGroup.y}>
                 {barGroup.bars.map((bar, index) => {
                   const scaleVal = config.useLogScale ? 0.1 : 0
-                  const { suppresedBarHeight: suppresedBarWidth, getIconSize, getIconPadding, getVerticalAnchor, isSuppressed } = composeSuppressionBars({ bar })
-
                   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
@@ -80,27 +62,28 @@ export const BarChartHorizontal = () => {
                     numbericBarHeight = 25
                   }
                   let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(scaleVal)
-                  const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(scaleVal))
-                  // const suppresedBarWidth = config.xAxis.showSuppressedLine ? 4 : 0
+                  const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   const isPositiveBar = bar.value >= 0 && isNumber(bar.value)
-                  let barWidth = isSuppressed ? suppresedBarWidth : barWidthHorizontal
+
+                  const { barWidthHorizontal: barWidth, isSuppressed, getAbsentDataLabel } = getBarConfig({ bar, defaultBarWidth, config, isNumber, getTextWidth, isVertical: false })
                   const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(scaleVal)
                   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 = !isPositiveBar ? 'below' : 'above'
-                  const barValueLabel = isSuppressed ? '' : yAxisValue
+                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
+                  const barDefaultLabel = !config.yAxis.displayNumbersOnBar ? '' : yAxisValue
 
                   // check if bar text/value string fits into  each bars.
-                  let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
-                  let textFits = Number(textWidth) < barWidthHorizontal - 5 // minus padding 5
+                  const textWidth = (getTextWidth as any)(barDefaultLabel, `normal ${fontSize[config.fontSize]}px sans-serif`)
+                  const textFits = Number(textWidth) < defaultBarWidth - 5
 
                   // control text position
                   let textAnchor = textFits ? 'end' : 'start'
                   let textAnchorLollipop = 'start'
                   let textPadding = textFits ? -5 : 5
                   let textPaddingLollipop = 10
-                  // if bars are negative we change positions of text
+                  //if bars are negative we change positions of text
                   if (barPosition === 'below') {
                     textAnchor = textFits ? 'start' : 'end'
                     textPadding = textFits ? 5 : -5
@@ -134,7 +117,8 @@ export const BarChartHorizontal = () => {
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
                   const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
-                  const displaylollipopShape = isSuppressed ? 'none' : 'block'
+                  const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
+
                   // update label color
                   if (barColor && labelColor && textFits) {
                     labelColor = getContrastColor('#000', barColor)
@@ -147,8 +131,6 @@ export const BarChartHorizontal = () => {
                     return barColor
                   }
 
-                  const iconPadding = symbol => (symbol === 'Asterisk' ? '3px' : symbol === 'Double Asterisks' ? '4px' : '12px')
-
                   return (
                     <Group key={`${barGroup.index}--${index}`}>
                       <Group key={`bar-sub-group-${barGroup.index}-${barGroup.x0}-${barY}--${index}`}>
@@ -185,44 +167,64 @@ export const BarChartHorizontal = () => {
                           // check if user selected column
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
                           // compare entered suppressed value with data value
-                          const isValueMatch = String(pd.value) === String(tableData[barGroup.index][bar.key]) && pd.value !== ''
+                          const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== ''
                           const isSuppressed = isValueMatch && selectedSuppressionColumn
-                          if (!isSuppressed || barHeight < 10 || !config.xAxis.showSuppressedSymbol) {
+
+                          if (!isSuppressed || pd.hideBarSymbol || !config.general.showSuppressedSymbol) {
                             return
                           }
+
+                          const hasAsterisk = String(pd.symbol).includes('Asterisk')
+                          const verticalAnchor = hasAsterisk ? 'middle' : 'end'
+                          const iconSize = pd.symbol === 'Asterisk' ? barHeight * 1.2 : pd.symbol === 'Double Asterisk' ? barHeight : barHeight / 1.5
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              fontSize={getIconSize(pd.symbol, barHeight)}
-                              angle={90}
+                              fontSize={iconSize}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX}
                               y={config.barHeight / 2 + config.barHeight * bar.index}
                               fill={'#000'}
-                              dx={iconPadding(pd.symbol)}
-                              verticalAnchor={getVerticalAnchor(pd.symbol)}
-                              textAnchor={'middle'}
+                              dy={config.barHeight / 5}
+                              dx={10}
+                              textAnchor='start'
+                              verticalAnchor={verticalAnchor}
                             >
                               {pd.iconCode}
                             </Text>
                           )
                         })}
 
-                        {!config.isLollipopChart && displayNumbersOnBar && (
+                        {!config.isLollipopChart && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
+                            opacity={transparentBar ? 0.5 : 1}
                             y={config.barHeight / 2 + config.barHeight * bar.index}
                             fill={labelColor}
                             dx={textPadding}
                             verticalAnchor='middle'
                             textAnchor={textAnchor}
                           >
-                            {barValueLabel}
+                            {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
-                        {config.isLollipopChart && displayNumbersOnBar && (
+                        <Text // prettier-ignore
+                          display={displayBar ? 'block' : 'none'}
+                          x={bar.y}
+                          opacity={transparentBar ? 0.5 : 1}
+                          y={config.barHeight / 2 + config.barHeight * bar.index}
+                          fill={labelColor}
+                          dx={absentDataLabel === 'N/A' ? 20 : textPadding}
+                          dy={config.isLollipopChart ? -10 : 0}
+                          verticalAnchor='middle'
+                          textAnchor={absentDataLabel === 'N/A' ? 'middle' : textAnchor}
+                        >
+                          {absentDataLabel}
+                        </Text>
+
+                        {config.isLollipopChart && (
                           <Text // prettier-ignore
                             display={displayBar ? 'block' : 'none'}
                             x={bar.y}
@@ -233,7 +235,7 @@ export const BarChartHorizontal = () => {
                             verticalAnchor='middle'
                             fontWeight={'normal'}
                           >
-                            {barValueLabel}
+                            {testZeroValue(bar.value) ? '' : barDefaultLabel}
                           </Text>
                         )}
                         {isLabelBelowBar && !config.yAxis.hideLabel && (

package/src/components/BarChart/components/BarChart.StackedHorizontal.tsx

@@ -49,8 +49,7 @@ const BarChartStackedHorizontal = () => {
                 const xAxisValue = formatNumber(data[bar.index][bar.key], 'left')
                 const yAxisValue = config.runtime.yAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.originalXAxis.dataKey])) : data[bar.index][config.runtime.originalXAxis.dataKey]
                 const yAxisTooltip = config.runtime.yAxis.label ? `${config.runtime.yAxis.label}: ${yAxisValue}` : yAxisValue
-                const textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
-
+                const textWidth = (getTextWidth as any)(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${xAxisValue}`
                 const tooltip = `<ul>

package/src/components/BarChart/components/BarChart.StackedVertical.tsx

@@ -12,11 +12,13 @@ import createBarElement from '@cdc/core/components/createBarElement'
 
 const BarChartStackedVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
-  const { xScale, yScale, xMax, yMax } = useContext(BarChartContext)
+  const { xScale, yScale, seriesScale, xMax, yMax } = useContext(BarChartContext)
   const { transformedData, colorScale, seriesHighlight, config, formatNumber, formatDate, parseDate, setSharedFilter } = useContext(ConfigContext)
   const { isHorizontal, barBorderWidth, applyRadius, hoveredBar, getAdditionalColumn, onMouseLeaveBar, onMouseOverBar, barStackedSeriesKeys } = useBarChart()
   const { orientation } = config
-  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+
+  const data = config.brush?.active && config.brush.data?.length ? config.brush.data : transformedData
+  const isDateAxisType = config.runtime.xAxis.type === 'date-time' || config.runtime.xAxis.type === 'date'
 
   return (
     config.visualizationSubType === 'stacked' &&
@@ -28,16 +30,14 @@ const BarChartStackedVertical = () => {
               barStack.bars.map(bar => {
                 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 barThickness = config.xAxis.type === 'date-time' ? config.barThickness * (xScale.range()[1] - xScale.range()[0]) : xMax / barStack.bars.length
-                let barThicknessAdjusted = barThickness * (config.xAxis.type === 'date-time' ? 1 : config.barThickness || 0.8)
-                let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
+                let barThickness = isDateAxisType ? (seriesScale.range()[1] - seriesScale.range()[0]) : (xMax / barStack.bars.length)
+                if(config.runtime.xAxis.type !==  'date') barThickness = config.barThickness * barThickness
                 // tooltips
                 const rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
-                const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(rawXValue)) : rawXValue
+                const xAxisValue = isDateAxisType ? formatDate(parseDate(rawXValue)) : rawXValue
                 const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
                 if (!yAxisValue) return
-                const barX = xScale(config.runtime.xAxis.type === 'date' ? parseDate(rawXValue) : rawXValue) - (config.xAxis.type === 'date' && config.xAxis.sortDates ? barThicknessAdjusted / 2 : 0)
-                const style = applyRadius(barStack.index)
+                const barX = xScale(isDateAxisType ? parseDate(rawXValue) : rawXValue) - (isDateAxisType ? barThickness / 2 : 0)
                 const xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
                 const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
@@ -47,7 +47,7 @@ const BarChartStackedVertical = () => {
                   <li class="tooltip-body ">${additionalColTooltip}</li>
                     </li></ul>`
 
-                setBarWidth(barThicknessAdjusted)
+                setBarWidth(barThickness)
 
                 return (
                   <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
@@ -63,7 +63,7 @@ const BarChartStackedVertical = () => {
                         borderColor: '#333',
                         borderStyle: 'solid',
                         borderWidth: `${config.barHasBorder === 'true' ? barBorderWidth : 0}px`,
-                        width: barThicknessAdjusted,
+                        width: barThickness,
                         height: bar.height,
                         x: barX,
                         y: bar.y,
@@ -80,7 +80,7 @@ const BarChartStackedVertical = () => {
                         },
                         styleOverrides: {
                           animationDelay: `${barStack.index * 0.5}s`,
-                          transformOrigin: `${barThicknessAdjusted / 2}px ${bar.y + bar.height}px`,
+                          transformOrigin: `${barThickness / 2}px ${bar.y + bar.height}px`,
                           opacity: transparentBar ? 0.2 : 1,
                           display: displayBar ? 'block' : 'none'
                         }

package/src/components/BarChart/components/BarChart.Vertical.tsx

@@ -5,6 +5,8 @@ import BarChartContext, { type BarChartContextValues } from './context'
 // Local hooks
 import { useBarChart } from '../../../hooks/useBarChart'
 import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
+import { getBarConfig, testZeroValue } from '../helpers'
+import { isConvertLineToBarGraph } from '../../../helpers/isConvertLineToBarGraph'
 // VisX library imports
 import { Group } from '@visx/group'
 import { Text } from '@visx/text'
@@ -25,10 +27,22 @@ export const BarChartVertical = () => {
   const [barWidth, setBarWidth] = useState(0)
   const [totalBarsInGroup, setTotalBarsInGroup] = useState(0)
   // prettier-ignore
-  const { assignColorsToValues, barBorderWidth, getAdditionalColumn, getHighlightedBarByValue, getHighlightedBarColorByValue, lollipopBarWidth, lollipopShapeSize, onMouseLeaveBar, onMouseOverBar, section, composeSuppressionBars, shouldSuppress } = useBarChart()
+  const {
+    // prettier-ignore
+    assignColorsToValues,
+    barBorderWidth,
+    getAdditionalColumn,
+    getHighlightedBarByValue,
+    getHighlightedBarColorByValue,
+    lollipopBarWidth,
+    lollipopShapeSize,
+    onMouseLeaveBar,
+    onMouseOverBar,
+    section
+  } = useBarChart()
 
   // prettier-ignore
-  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData,  brushConfig, } = useContext<ChartContext>(ConfigContext)
+  const { colorScale, config, dashboardConfig, tableData, formatDate, formatNumber, getXAxisData, getYAxisData, isNumber, parseDate, seriesHighlight, setSharedFilter, transformedData, brushConfig, getTextWidth } = useContext<ChartContext>(ConfigContext)
   const { HighLightedBarUtils } = useHighlightedBars(config)
   let data = transformedData
   // check if user add suppression
@@ -44,7 +58,7 @@ export const BarChartVertical = () => {
 
   return (
     config.visualizationSubType !== 'stacked' &&
-    (config.visualizationType === 'Bar' || config.visualizationType === 'Combo') &&
+    (config.visualizationType === 'Bar' || config.visualizationType === 'Combo' || isConvertLineToBarGraph(config.visualizationType, data, config.allowLineToBarGraph)) &&
     config.orientation === 'vertical' && (
       <Group>
         <BarGroup
@@ -66,19 +80,16 @@ export const BarChartVertical = () => {
             return barGroups.map((barGroup, index) => (
               <Group className={`bar-group-${barGroup.index}-${barGroup.x0}--${index} ${config.orientation}`} key={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} id={`bar-group-${barGroup.index}-${barGroup.x0}--${index}`} left={barGroup.x0}>
                 {barGroup.bars.map((bar, index) => {
-                  const { suppresedBarHeight, getIconSize, getIconPadding, getVerticalAnchor, isSuppressed } = composeSuppressionBars({ bar })
                   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
                   const transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                   const displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                  const barHeightBase = Math.abs(yScale(bar.value) - yScale(scaleVal))
-                  const barYBase = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
-                  const barY = isSuppressed ? yScale(scaleVal) - suppresedBarHeight : barYBase
 
-                  let barGroupWidth = seriesScale.range()[1]
-
-                  let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
+                  let barGroupWidth = seriesScale.range()[1] - seriesScale.range()[0]
+                  const defaultBarHeight = Math.abs(yScale(bar.value) - yScale(scaleVal))
+                  const defaultBarY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
+                  let barWidth = config.isLollipopChart ? lollipopBarWidth : seriesScale.bandwidth()
                   let barX = bar.x + (config.isLollipopChart ? (barGroupWidth / barGroup.bars.length - lollipopBarWidth) / 2 : 0) - (config.xAxis.type === 'date-time' ? barGroupWidth / 2 : 0)
                   setBarWidth(barWidth)
                   setTotalBarsInGroup(barGroup.bars.length)
@@ -88,7 +99,6 @@ export const BarChartVertical = () => {
                   // create new Index for bars with negative values
                   const newIndex = bar.value < 0 ? -1 : index
                   // tooltips
-
                   const additionalColTooltip = getAdditionalColumn(bar.key, data[barGroup.index][config.runtime.originalXAxis.dataKey])
                   let xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                   const tooltipBody = `${config.runtime.seriesLabels[bar.key]}: ${yAxisValue}`
@@ -111,10 +121,13 @@ export const BarChartVertical = () => {
                   const highlightedBar = getHighlightedBarByValue(xAxisValue)
                   const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
                   const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
-                  const barValueLabel = isSuppressed ? '' : yAxisValue
-                  const barHeight = isSuppressed ? suppresedBarHeight : barHeightBase
 
-                  const displaylollipopShape = isSuppressed ? 'none' : 'block'
+                  const { barHeight, isSuppressed, getBarY, getAbsentDataLabel } = getBarConfig({ bar, defaultBarHeight, config, isNumber, getTextWidth, barWidth, isVertical: true, yAxisValue })
+
+                  const absentDataLabel = getAbsentDataLabel(yAxisValue)
+                  const barDefaultLabel = isSuppressed || !config.labels ? '' : yAxisValue
+                  const barY = getBarY(defaultBarY, yScale(scaleVal))
+                  const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
                   const getBarBackgroundColor = (barColor: string, filteredOutColor?: string): string => {
                     let _barColor = barColor
                     let _filteredOutColor = filteredOutColor || '#f2f2f2'
@@ -194,24 +207,28 @@ export const BarChartVertical = () => {
                           const selectedSuppressionColumn = !pd.column || pd.column === bar.key
                           // compare entered suppressed value with data value
                           const isValueMatch = String(pd.value) === String(bar.value) && pd.value !== ''
-                          let isSuppressed = isValueMatch && selectedSuppressionColumn
+                          const isSuppressed = isValueMatch && selectedSuppressionColumn
 
-                          if (!isSuppressed || barWidth < 10 || !config.xAxis.showSuppressedSymbol) {
+                          if (!isSuppressed || barWidth < 10 || !config.general.showSuppressedSymbol || pd.hideBarSymbol) {
                             return
                           }
+                          const hasAsterisk = String(pd.symbol).includes('Asterisk')
+                          const yPadding = hasAsterisk ? -5 : -8
+                          const verticalAnchor = hasAsterisk ? 'middle' : 'end'
+                          const iconSize = pd.symbol === 'Asterisk' ? barWidth * 1.2 : pd.symbol === 'Double Asterisk' ? barWidth : barWidth / 1.5
 
                           return (
                             <Text // prettier-ignore
                               key={index}
-                              dy={getIconPadding(pd.symbol)}
+                              dy={yPadding}
                               display={displayBar ? 'block' : 'none'}
                               opacity={transparentBar ? 0.5 : 1}
                               x={barX + barWidth / 2}
                               y={barY}
-                              verticalAnchor={getVerticalAnchor(pd.symbol)}
+                              verticalAnchor={verticalAnchor}
                               fill={labelColor}
                               textAnchor='middle'
-                              fontSize={`${getIconSize(pd.symbol, barWidth)}px`}
+                              fontSize={`${iconSize}px`}
                             >
                               {pd.iconCode}
                             </Text>
@@ -219,14 +236,25 @@ export const BarChartVertical = () => {
                         })}
 
                         <Text // prettier-ignore
-                          display={config.labels && displayBar ? 'block' : 'none'}
+                          display={displayBar ? 'block' : 'none'}
+                          opacity={transparentBar ? 0.5 : 1}
+                          x={barX + barWidth / 2}
+                          y={barY - 5}
+                          fill={labelColor}
+                          textAnchor='middle'
+                        >
+                          {testZeroValue(bar.value) ? '' : barDefaultLabel}
+                        </Text>
+                        <Text // prettier-ignore
+                          display={displayBar ? 'block' : 'none'}
                           opacity={transparentBar ? 0.5 : 1}
                           x={barX + barWidth / 2}
                           y={barY - 5}
                           fill={labelColor}
                           textAnchor='middle'
+                          fontSize={config.isLollipopChart ? null : barWidth / 2}
                         >
-                          {barValueLabel}
+                          {absentDataLabel}
                         </Text>
 
                         {config.isLollipopChart && config.lollipopShape === 'circle' && (
@@ -273,7 +301,7 @@ export const BarChartVertical = () => {
               let upperPos
               let lowerPos
               let tickWidth = 5
-              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date' || config.xAxis.type !== 'date-time' ? seriesScale.range()[1] / 2 : 0)
+              xPos = xScale(getXAxisData(d)) + (config.xAxis.type !== 'date-time' ? seriesScale.range()[1] / 2 : 0)
               upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
               lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
               return (