@cdc/chart 4.24.4 → 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

@@ -14,8 +14,8 @@ import { bisector } from 'd3-array'
 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 } = useContext(ConfigContext)
-  const data = config.brush.active && config.brush.data?.length ? config.brush.data : transformedData
+  let { transformedData, config, handleLineType, parseDate, formatDate, formatNumber, seriesHighlight, colorScale, rawData, brushConfig } = useContext(ConfigContext)
+  const data = config.brush?.active && brushConfig.data?.length ? brushConfig.data : transformedData
 
   if (!data) return
 

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

@@ -1,62 +1,42 @@
 import React, { useContext } from 'react'
+
+// Local context and hooks
 import ConfigContext from '../../../ConfigContext'
 import { useBarChart } from '../../../hooks/useBarChart'
+import { useHighlightedBars } from '../../../hooks/useHighlightedBars'
+
+// VisX library imports
 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'
+
+// 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
+// Third party libraries
 import chroma from 'chroma-js'
+
+// Local context and types
 import BarChartContext, { BarChartContextValues } from './context'
 import { ChartContext } from '../../../types/ChartContext'
 
-import createBarElement from '@cdc/core/components/createBarElement'
-
 export const BarChartHorizontal = () => {
   const { xScale, yScale, yMax, seriesScale } = useContext<BarChartContextValues>(BarChartContext)
-  const { transformedData: data, 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,
-    generateIconSize,
-    getAdditionalColumn,
-    hoveredBar,
-    onMouseLeaveBar,
-    onMouseOverBar
-  } = useBarChart()
+  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 } =
+    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' &&
     config.orientation === 'horizontal' && (
       <Group>
         <BarGroup
-          data={data}
+          data={config.preliminaryData?.some(pd => pd.value && pd.type === 'suppression') ? tableData : data}
           keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
           height={yMax}
           x0={d => d[config.runtime.originalXAxis.dataKey]}
@@ -72,7 +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
-
                   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
@@ -83,30 +62,28 @@ export const BarChartHorizontal = () => {
                     numbericBarHeight = 25
                   }
                   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 suppresedBarWidth = 25
+                  const defaultBarWidth = Math.abs(xScale(bar.value) - xScale(scaleVal))
                   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 { 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 = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? '' : 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 = 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
@@ -140,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 = config.suppressedData.some(d => bar.key === d.column && bar.value === d.value) ? 'none' : 'block'
+                  const displaylollipopShape = testZeroValue(bar.value) ? 'none' : 'block'
+
                   // update label color
                   if (barColor && labelColor && textFits) {
                     labelColor = getContrastColor('#000', barColor)
@@ -185,39 +163,68 @@ export const BarChartHorizontal = () => {
                             display: displayBar ? 'block' : 'none'
                           }
                         })}
-                        <g
-                          transform={`translate(${barX},${barHeight * bar.index})`}
-                          onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
-                          onMouseLeave={onMouseLeaveBar}
-                          opacity={transparentBar ? 0.2 : 1}
-                          display={displayBar ? 'block' : 'none'}
-                          data-tooltip-html={tooltip}
-                          data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
-                          onClick={e => {
-                            e.preventDefault()
-                            if (setSharedFilter) {
-                              bar[config.xAxis.dataKey] = yAxisValue
-                              setSharedFilter(config.uid, bar)
-                            }
-                          }}
-                        >
-                          {getIcon(bar, barWidth)}
-                        </g>
+                        {config.preliminaryData?.map((pd, index) => {
+                          // 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(bar.value) && pd.value !== ''
+                          const isSuppressed = isValueMatch && selectedSuppressionColumn
 
-                        {!config.isLollipopChart && displayNumbersOnBar && (
+                          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={iconSize}
+                              display={displayBar ? 'block' : 'none'}
+                              opacity={transparentBar ? 0.5 : 1}
+                              x={barX}
+                              y={config.barHeight / 2 + config.barHeight * bar.index}
+                              fill={'#000'}
+                              dy={config.barHeight / 5}
+                              dx={10}
+                              textAnchor='start'
+                              verticalAnchor={verticalAnchor}
+                            >
+                              {pd.iconCode}
+                            </Text>
+                          )
+                        })}
+
+                        {!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}
@@ -228,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'
                         }