@cdc/chart 4.24.1 → 4.24.2

package/examples/feature/line/line-chart-preliminary.json

@@ -10,7 +10,7 @@
   "theme": "theme-orange",
   "animate": false,
   "fontSize": "medium",
-  "lineDatapointStyle": "hover",
+  "lineDatapointStyle": "always show",
   "lineDatapointColor": "Same as Line",
   "barHasBorder": "false",
   "isLollipopChart": false,
@@ -32,26 +32,10 @@
   "preliminaryData": [
     {
       "type": "effect",
-      "label": "Cricle  1",
+      "label": "dashed",
       "column": "Data 2",
-      "value": "20",
-      "style": "Open Circles",
-      "seriesKey": "Data 1"
-    },
-    {
-      "type": "",
-      "label": "Cricle 2",
-      "column": "Data 3",
-      "value": "20",
-      "style": "Open Circles",
-      "seriesKey": "Data 1"
-    },
-    {
-      "type": "effect",
-      "label": "circle 3",
-      "column": "Data 2",
-      "value": "30",
-      "style": "Open Circles",
+      "value": "38",
+      "style": "Dashed Medium",
       "seriesKey": "Data 1"
     }
   ],
@@ -77,6 +61,7 @@
     "rightAxisTickColor": "#333",
     "numTicks": "",
     "axisPadding": 0,
+    "scalePadding": 10,
     "tickRotation": 0,
     "anchors": [],
     "label": "Y-Axis Label Example"
@@ -158,6 +143,7 @@
     "indexLabel": "",
     "download": true,
     "showVertical": false,
+    "dateDisplayFormat": "",
     "show": true
   },
   "orientation": "vertical",
@@ -186,25 +172,55 @@
     "data": [
       {
         "Year": "2015",
-        "Data 1": "25",
+        "Data 1": "44",
         "Data 2": "20",
         "Data 3": "55"
       },
       {
         "Year": "2016",
-        "Data 1": "35",
+        "Data 1": "",
         "Data 2": "30",
         "Data 3": "35"
       },
       {
         "Year": "2017",
-        "Data 1": "22",
+        "Data 1": "133",
         "Data 2": "38",
-        "Data 3": "40"
+        "Data 3": ""
       },
       {
         "Year": "2018",
-        "Data 1": "40",
+        "Data 1": "122",
+        "Data 2": "40",
+        "Data 3": "20"
+      },
+      {
+        "Year": "2019",
+        "Data 1": "12",
+        "Data 2": "40",
+        "Data 3": ""
+      },
+      {
+        "Year": "2020",
+        "Data 1": "55",
+        "Data 2": "40",
+        "Data 3": "20"
+      },
+      {
+        "Year": "2021",
+        "Data 1": "34",
+        "Data 2": "40",
+        "Data 3": "20"
+      },
+      {
+        "Year": "2022",
+        "Data 1": "",
+        "Data 2": "40",
+        "Data 3": "20"
+      },
+      {
+        "Year": "2023",
+        "Data 1": "65",
         "Data 2": "40",
         "Data 3": "20"
       }
@@ -251,20 +267,21 @@
     },
     {
       "dataKey": "Data 2",
-      "type": "Bar",
-      "tooltip": true,
-      "axis": "Left"
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
     },
     {
       "dataKey": "Data 3",
-      "type": "Bar",
-      "tooltip": true,
-      "axis": "Left"
+      "type": "Line",
+      "axis": "Left",
+      "tooltip": true
     }
   ],
   "tooltips": {
     "opacity": 90,
-    "singleSeries": false
+    "singleSeries": false,
+    "dateDisplayFormat": ""
   },
   "forestPlot": {
     "startAt": 0,
@@ -317,25 +334,55 @@
   "data": [
     {
       "Year": "2015",
-      "Data 1": "25",
+      "Data 1": "44",
       "Data 2": "20",
       "Data 3": "55"
     },
     {
       "Year": "2016",
-      "Data 1": "35",
+      "Data 1": "",
       "Data 2": "30",
       "Data 3": "35"
     },
     {
       "Year": "2017",
-      "Data 1": "22",
+      "Data 1": "133",
       "Data 2": "38",
-      "Data 3": "40"
+      "Data 3": ""
     },
     {
       "Year": "2018",
-      "Data 1": "40",
+      "Data 1": "122",
+      "Data 2": "40",
+      "Data 3": "20"
+    },
+    {
+      "Year": "2019",
+      "Data 1": "12",
+      "Data 2": "40",
+      "Data 3": ""
+    },
+    {
+      "Year": "2020",
+      "Data 1": "55",
+      "Data 2": "40",
+      "Data 3": "20"
+    },
+    {
+      "Year": "2021",
+      "Data 1": "34",
+      "Data 2": "40",
+      "Data 3": "20"
+    },
+    {
+      "Year": "2022",
+      "Data 1": "",
+      "Data 2": "40",
+      "Data 3": "20"
+    },
+    {
+      "Year": "2023",
+      "Data 1": "65",
       "Data 2": "40",
       "Data 3": "20"
     }

package/examples/feature/regions/index.json

@@ -29,6 +29,7 @@
     "right": 5
   },
   "suppressedData": [],
+  "preliminaryData": [],
   "yAxis": {
     "hideAxis": false,
     "displayNumbersOnBar": false,
@@ -97,7 +98,7 @@
     "horizontal": 750
   },
   "xAxis": {
-    "sortDates": false,
+    "sortDates": true,
     "anchors": [],
     "type": "date",
     "showTargetLabel": true,
@@ -153,6 +154,7 @@
     "dynamicLegendChartMessage": "Select Options from the Legend",
     "lineMode": false,
     "verticalSorted": false,
+    "highlightOnHover": false,
     "position": "right",
     "label": "Type of Data"
   },
@@ -276,7 +278,8 @@
     }
   ],
   "tooltips": {
-    "opacity": 90
+    "opacity": 90,
+    "singleSeries": false
   },
   "forestPlot": {
     "startAt": 0,
@@ -319,9 +322,9 @@
     "leftWidthOffset": 0,
     "rightWidthOffset": 0,
     "showZeroLine": false,
-    "hideDateCategoryCol": false,
     "leftLabel": "",
     "rightLabel": "",
+    "hideDateCategoryCol": false,
     "width": "auto",
     "lowerCiField": "",
     "upperCiField": ""
@@ -387,14 +390,15 @@
       "Data 6": "300"
     }
   ],
-  "visualizationType": "Bar",
+  "visualizationType": "Line",
   "regions": [
     {
       "from": "03/15/2016",
       "to": "05/15/2016",
       "label": "Region Applied to Timeline",
       "color": "Black",
-      "background": "Grey"
+      "background": "Grey",
+      "fromType": "Previous Days"
     }
   ],
   "validated": 4.23,

package/index.html

@@ -17,6 +17,8 @@
       margin-top: 3rem;
     }
   </style>
+  <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/contrib/libs/bootstrap/latest/css/bootstrap.min.css?_=39423">
+  <link rel="stylesheet prefetch" href="https://www.cdc.gov/TemplatePackage/4.0/assets/css/app.min.css?_=39423">
 </head>
 
 <body>
@@ -34,7 +36,7 @@
   -->
 
   <!-- GENERIC CHART TYPES -->
-  <!-- <div class="react-container" data-config="/examples/private/prod-line-config.json"></div> -->
+  <div class="react-container" data-config="/examples/private/rvr.json"></div>
   <!-- <div class="react-container" data-config="/examples/private/chart-t.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/bar/additional-column-tooltip.json"></div> -->
   <!-- <div class="react-container" data-config="https://cdc.gov/poxvirus/mpox/modules/data-viz/mpx-trends_1.json"></div> -->
@@ -45,7 +47,7 @@
   <!-- <div class="react-container" data-config="/examples/feature/forest-plot/forest-plot.json"></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/pie/planet-pie-example-config.json"></div> -->
   <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Viz.json></div> -->
-  <!-- <div class="react-container" data-config=/examples/feature/regions/index.json></div> -->
+  <div class="react-container" data-config=/examples/feature/regions/index.json></div>
   <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
   <!-- <div class="react-container" data-config=https://www.cdc.gov/wcms/4.0/cdc-wp/data-presentation/examples/Line_Chart_Regions_Viz.json></div> -->
   <!-- <div class="react-container" data-config="/examples/feature/forecasting/forecasting.json"></div> -->

package/package.json

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

package/src/CdcChart.tsx

@@ -52,16 +52,19 @@ import './scss/main.scss'
 import DataTable from '@cdc/core/components/DataTable'
 import { getFileExtension } from '@cdc/core/helpers/getFileExtension'
 import Title from '@cdc/core/components/ui/Title'
+import { ChartConfig } from './types/ChartConfig'
+import { Label } from './types/Label'
+import { isSolrCsv, isSolrJson } from '@cdc/core/helpers/isSolr'
 
 export default function CdcChart({ configUrl, config: configObj, isEditor = false, isDebug = false, isDashboard = false, setConfig: setParentConfig, setEditing, hostname, link, setSharedFilter, setSharedFilterValue, dashboardConfig }) {
   const transform = new DataTransform()
   const [loading, setLoading] = useState(true)
   const [colorScale, setColorScale] = useState(null)
-  const [config, setConfig] = useState<any>({})
+  const [config, setConfig] = useState<ChartConfig>({} as ChartConfig)
   const [stateData, setStateData] = useState(config.data || [])
   const [excludedData, setExcludedData] = useState<Record<string, number>[] | undefined>(undefined)
   const [filteredData, setFilteredData] = useState<Record<string, any>[] | undefined>(undefined)
-  const [seriesHighlight, setSeriesHighlight] = useState<any[]>([])
+  const [seriesHighlight, setSeriesHighlight] = useState<string[]>([])
   const [currentViewport, setCurrentViewport] = useState('lg')
   const [dimensions, setDimensions] = useState<[number?, number?]>([])
   const [externalFilters, setExternalFilters] = useState<any[]>()
@@ -95,7 +98,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       let qsParams = Object.fromEntries(new URLSearchParams(dataUrl.search))
 
       let isUpdateNeeded = false
-      config.filters.forEach(filter => {
+      config.filters?.forEach(filter => {
         if (filter.type === 'url' && qsParams[filter.queryParameter] !== decodeURIComponent(filter.active)) {
           qsParams[filter.queryParameter] = filter.active
           isUpdateNeeded = true
@@ -117,7 +120,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
       try {
         const ext = getFileExtension(dataUrl.href)
-        if ('csv' === ext) {
+        if ('csv' === ext || isSolrCsv(dataUrlFinal)) {
           data = await fetch(dataUrlFinal)
             .then(response => response.text())
             .then(responseText => {
@@ -128,7 +131,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
               })
               return parsedCsv.data
             })
-        } else if ('json' === ext) {
+        } else if ('json' === ext || isSolrJson(dataUrlFinal)) {
           data = await fetch(dataUrlFinal).then(response => response.json())
         } else {
           data = []
@@ -166,7 +169,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     if (response.dataUrl && !urlFilters) {
       try {
         const ext = getFileExtension(response.dataUrl)
-        if ('csv' === ext) {
+        if ('csv' === ext || isSolrCsv(response.dataUrl)) {
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`)
             .then(response => response.text())
             .then(responseText => {
@@ -189,7 +192,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             })
         }
 
-        if ('json' === ext) {
+        if ('json' === ext || isSolrJson(response.dataUrl)) {
           data = await fetch(response.dataUrl + `?v=${cacheBustingString()}`).then(response => response.json())
         }
       } catch {
@@ -294,6 +297,16 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       setFilteredData(currentData)
     }
 
+    if (!['Area Chart', 'Bar', 'Line', 'Combo'].includes(newConfig.visualizationType) || newConfig.orientation === 'horizontal') {
+      newConfig.xAxis.sortDates = false
+    }
+
+    if (newConfig.xAxis.sortDates && newConfig.barThickness > 0.1) {
+      newConfig.barThickness = 0.035
+    } else if (!newConfig.xAxis.sortDates && newConfig.barThickness < 0.1) {
+      newConfig.barThickness = 0.35
+    }
+
     //Enforce default values that need to be calculated at runtime
     newConfig.runtime = {}
     newConfig.runtime.seriesLabels = {}
@@ -426,6 +439,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
         if (series.type === 'Line' || series.type === 'dashed-sm' || series.type === 'dashed-md' || series.type === 'dashed-lg') {
           newConfig.runtime.lineSeriesKeys.push(series.dataKey)
         }
+        if (series.type === 'Combo') {
+          series.type = 'Bar'
+        }
       })
     }
 
@@ -448,8 +464,8 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     }
 
     if ((newConfig.visualizationType === 'Bar' && newConfig.orientation === 'horizontal') || ['Deviation Bar', 'Paired Bar', 'Forest Plot'].includes(newConfig.visualizationType)) {
-      newConfig.runtime.xAxis = newConfig.yAxis
-      newConfig.runtime.yAxis = newConfig.xAxis
+      newConfig.runtime.xAxis = newConfig.yAxis['yAxis'] ? newConfig.yAxis['yAxis'] : newConfig.yAxis
+      newConfig.runtime.yAxis = newConfig.xAxis['xAxis'] ? newConfig.xAxis['xAxis'] : newConfig.xAxis
 
       newConfig.runtime.horizontal = false
       newConfig.orientation = 'horizontal'
@@ -463,6 +479,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
       newConfig.runtime.yAxis = newConfig.yAxis
       newConfig.runtime.horizontal = false
     }
+
     newConfig.runtime.uniqueId = Date.now()
     newConfig.runtime.editorErrorMessage = newConfig.visualizationType === 'Pie' && !newConfig.yAxis.dataKey ? 'Data Key property in Y Axis section must be set for pie charts.' : ''
 
@@ -607,9 +624,9 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
 
   // Generates color palette to pass to child chart component
   useEffect(() => {
-    if (stateData && config.xAxis && config.runtime.seriesKeys) {
-      const configPalette = config.customColors ? config.customColors : config.visualizationType === 'Paired Bar' || config.visualizationType === 'Deviation Bar' ? config.twoColor.palette : config.palette
-      const allPalettes = { ...colorPalettes, ...twoColorPalette }
+    if (stateData && config.xAxis && config.runtime?.seriesKeys) {
+      const configPalette = ['Paired Bar', 'Deviation Bar'].includes(config.visualizationType) ? config.twoColor.palette : config.palette
+      const allPalettes: Record<string, string[]> = { ...colorPalettes, ...twoColorPalette }
       let palette = config.customColors || allPalettes[configPalette]
       let numberOfKeys = config.runtime.seriesKeys.length
       let newColorScale
@@ -637,27 +654,22 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
   }, [config, stateData]) // eslint-disable-line
 
   // Called on legend click, highlights/unhighlights the data series with the given label
-  const highlight = label => {
-    const newSeriesHighlight: any[] = []
-
+  const highlight = (label: Label) => {
     // If we're highlighting all the series, reset them
     if (seriesHighlight.length + 1 === config.runtime.seriesKeys.length && config.visualizationType !== 'Forecasting') {
       highlightReset()
       return
     }
 
-    seriesHighlight.forEach(value => {
-      newSeriesHighlight.push(value)
-    })
+    const newSeriesHighlight = [...seriesHighlight]
 
     let newHighlight = label.datum
     if (config.runtime.seriesLabels) {
-      for (let i = 0; i < config.runtime.seriesKeys.length; i++) {
-        if (config.runtime.seriesLabels[config.runtime.seriesKeys[i]] === label.datum) {
-          newHighlight = config.runtime.seriesKeys[i]
-          break
+      config.runtime.seriesKeys.forEach(key => {
+        if (config.runtime.seriesLabels[key] === label.datum) {
+          newHighlight = key
         }
-      }
+      })
     }
 
     if (newSeriesHighlight.indexOf(newHighlight) !== -1) {
@@ -713,6 +725,10 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     return timeFormat(config.runtime[section].dateDisplayFormat)(date)
   }
 
+  const formatTooltipsDate = date => {
+    return timeFormat(config.tooltips.dateDisplayFormat)(date)
+  }
+
   // function calculates the width of given text and its font-size
   function getTextWidth(text, font) {
     const canvas = document.createElement('canvas')
@@ -1071,7 +1087,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
             {config.xAxis.dataKey && config.table.show && config.visualizationType !== 'Spark Line' && (
               <DataTable
                 config={config}
-                rawData={config.data}
+                rawData={config.table.customTableConfig ? filterData(config.filters, config.data) : config.data}
                 runtimeData={transform.applySuppression(filteredData || excludedData, config.suppressedData)}
                 expandDataTable={config.table.expanded}
                 columns={config.columns}
@@ -1119,6 +1135,7 @@ export default function CdcChart({ configUrl, config: configObj, isEditor = fals
     currentViewport,
     parseDate,
     formatDate,
+    formatTooltipsDate,
     formatNumber,
     loading,
     updateConfig,

package/src/_stories/ChartEditor.stories.tsx

@@ -14,7 +14,7 @@ type Story = StoryObj<typeof Chart>
 
 export const Primary: Story = {
   args: {
-    config: { ...pieChartExample, data: pieData },
+    config: { ...pieChartExample, data: pieData, columns: { someCol: { name: 'females', showInViz: true } } },
     isEditor: true
   }
 }

package/src/_stories/_mock/pie_config.json

@@ -97,11 +97,12 @@
     "caption": "",
     "showDownloadUrl": false,
     "showDataTableLink": true,
-    "indexLabel": "",
+    "indexLabel": "Cause Type",
     "download": false,
     "showVertical": true,
     "show": true,
-    "customTableConfig": true
+    "customTableConfig": true,
+    "excludeColumns": ["location", "age", "use", "data_group", "data_sub_group", "cause_category"]
   },
   "orientation": "vertical",
   "color": "pinkpurple",
@@ -182,7 +183,7 @@
   "filters": [
     {
       "values": ["age", "sex"],
-      "active": "age",
+      "active": "sex",
       "filterStyle": "dropdown",
       "order": "asc",
       "columnName": "data_group"

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

@@ -18,26 +18,8 @@ const AreaChart = props => {
 
   if (!data) return
 
-  // Tooltip helper for getting data to the closest date/category hovered.
-  const getXValueFromCoordinate = x => {
-    if (config.xAxis.type === 'categorical' || config.visualizationType === 'Combo') {
-      let eachBand = xScale.step()
-      let numerator = x
-      const index = Math.floor(Number(numerator) / eachBand)
-      return xScale.domain()[index - 1] // fixes off by 1 error
-    }
-
-    if (config.xAxis.type === 'date' && config.visualizationType !== 'Combo') {
-      const bisectDate = bisector(d => parseDate(d[config.xAxis.dataKey])).left
-      const x0 = xScale.invert(x)
-      const index = bisectDate(config.data, x0, 1)
-      const val = parseDate(config.data[index - 1][config.xAxis.dataKey])
-      return val
-    }
-  }
-
   const handleX = d => {
-    return config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])
+    return (config.xAxis.type === 'date' ? xScale(parseDate(d[config.xAxis.dataKey], false)) : xScale(d[config.xAxis.dataKey])) + (xScale.bandwidth ? xScale.bandwidth() / 2 : 0)
   }
 
   const handleY = (d, index, s = undefined) => {
@@ -61,12 +43,6 @@ const AreaChart = props => {
               let transparentArea = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(s.dataKey) === -1
               let displayArea = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(s.dataKey) !== -1
 
-              if (config.xAxis.type === 'date') {
-                data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
-              } else {
-                data.map(d => xScale(d[config.xAxis.dataKey]))
-              }
-
               return (
                 <React.Fragment key={index}>
                   {/* prettier-ignore */}

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

@@ -25,13 +25,15 @@ 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 = xMax / barStack.bars.length
-                let barThicknessAdjusted = barThickness * (config.barThickness || 0.8)
+                let barThickness = config.xAxis.type === 'date' && config.xAxis.sortDates ? (config.barThickness * (xScale.range()[1] - xScale.range()[0])) : xMax / barStack.bars.length
+                let barThicknessAdjusted = barThickness * (config.xAxis.type === 'date' && config.xAxis.sortDates ? 1 : (config.barThickness || 0.8))
                 let offset = (barThickness * (1 - (config.barThickness || 0.8))) / 2
                 // 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 rawXValue = bar.bar.data[config.runtime.xAxis.dataKey]
+                const xAxisValue = config.runtime.xAxis.type === 'date' ? 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 xAxisTooltip = config.runtime.xAxis.label ? `${config.runtime.xAxis.label}: ${xAxisValue}` : xAxisValue
                 const additionalColTooltip = getAdditionalColumn(hoveredBar)
@@ -56,14 +58,14 @@ const BarChartStackedVertical = () => {
                         `}
                     </style>
                     <Group key={`bar-stack-${barStack.index}-${bar.index}`} id={`barStack${barStack.index}-${bar.index}`} className='stack vertical'>
-                      <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barThickness * bar.index + offset} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
+                      <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barX + barWidth / 2} y={bar.y - 5} fill={'#000'} textAnchor='middle'>
                         {yAxisValue}
                       </Text>
                       <foreignObject
                         onMouseOver={() => onMouseOverBar(xAxisValue, bar.key)}
                         onMouseLeave={onMouseLeaveBar}
                         key={`bar-stack-${barStack.index}-${bar.index}`}
-                        x={barThickness * bar.index + offset}
+                        x={barX}
                         y={bar.y}
                         width={barThicknessAdjusted}
                         height={bar.height}