@cdc/chart 4.23.2 → 4.23.4

package/src/components/AreaChart.jsx

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

package/src/components/BarChart.jsx

@@ -8,10 +8,7 @@ import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
 
 export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getXAxisData, getYAxisData, animatedChart, visible }) {
-  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, isNumber, cleanData, getTextWidth, parseDate } = useContext(ConfigContext)
-  // Just do this once up front otherwise we end up
-  // calling clean several times on same set of data (TT)
-  const cleanedData = cleanData(data, config.xAxis.dataKey)
+  const { transformedData: data, colorScale, seriesHighlight, config, formatNumber, updateConfig, colorPalettes, formatDate, isNumber, getTextWidth, parseDate } = useContext(ConfigContext)
 
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
@@ -32,17 +29,15 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
-  const applyRadius = (index, isNegative) => {
+  const applyRadius = index => {
     if (index === undefined || index === null || !isRounded) return
     let style = {}
 
     if ((isStacked && index + 1 === stackCount) || !isStacked) {
-      if (isNegative) {
-        // reverse borderRadius to bottom
-        style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `0 0 ${radius} ${radius}` }
-      } else {
-        style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
-      }
+      style = isHorizontal ? { borderRadius: `0 ${radius}  ${radius}  0` } : { borderRadius: `${radius} ${radius} 0 0` }
+    }
+    if (!isStacked && index === -1) {
+      style = isHorizontal ? { borderRadius: `${radius} 0  0 ${radius} ` } : { borderRadius: ` 0  0 ${radius} ${radius}` }
     }
     if (tipRounding === 'full' && isStacked && index === 0 && stackCount > 1) {
       style = isHorizontal ? { borderRadius: `${radius} 0 0 ${radius}` } : { borderRadius: `0 0 ${radius} ${radius}` }
@@ -52,7 +47,6 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     }
     return style
   }
-  // }
 
   const updateBars = defaultBars => {
     // function updates  stacked && regular && lollipop horizontal bars
@@ -84,7 +78,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
 
     // return new updated bars/groupes
     return barsArr.map((bar, i) => {
-      // set bars Y dynamycly to handle space between bars
+      // set bars Y dynamically to handle space between bars
       let y = 0
       bar.index !== 0 && (y = (barHeight + barSpace + labelHeight) * i)
 
@@ -105,13 +99,13 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         }
       })
     }
-  }, [config, updateConfig])
+  }, [config, updateConfig]) // eslint-disable-line
 
   useEffect(() => {
     if (config.isLollipopChart === false && config.barHeight < 25) {
       updateConfig({ ...config, barHeight: 25 })
     }
-  }, [config.isLollipopChart])
+  }, [config.isLollipopChart]) // eslint-disable-line
 
   useEffect(() => {
     if (config.visualizationSubType === 'horizontal') {
@@ -120,7 +114,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         orientation: 'horizontal'
       })
     }
-  }, [])
+  }, []) // eslint-disable-line
 
   useEffect(() => {
     if (config.barStyle === 'lollipop' && !config.isLollipopChart) {
@@ -129,14 +123,14 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     if (isRounded || config.barStyle === 'flat') {
       updateConfig({ ...config, isLollipopChart: false })
     }
-  }, [config.barStyle])
+  }, [config.barStyle]) // eslint-disable-line
 
   return (
     <ErrorBoundary component='BarChart'>
       <Group left={parseFloat(config.runtime.yAxis.size)}>
         {/* Stacked Vertical */}
         {config.visualizationSubType === 'stacked' && !isHorizontal && (
-          <BarStack data={cleanedData} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
+          <BarStack data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} x={d => d[config.runtime.xAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale}>
             {barStacks =>
               barStacks.reverse().map(barStack =>
                 barStack.bars.map(bar => {
@@ -147,8 +141,9 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   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 yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0)
-                  const style = applyRadius(barStack.index, yAxisValue < 0)
+                  const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
+
+                  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) {
@@ -161,7 +156,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   ${xAxisTooltip}
                     </div>`
                   return (
-                    <>
+                    <Group key={`${barStack.index}--${bar.index}--${orientation}`}>
                       <style>
                         {`
                          #barStack${barStack.index}-${bar.index} rect,
@@ -173,7 +168,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       </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={bar.color} textAnchor='middle'>
-                          {formatNumber(bar.bar ? bar.bar.data[bar.key] : 0)}
+                          {yAxisValue}
                         </Text>
                         <foreignObject
                           key={`bar-stack-${barStack.index}-${bar.index}`}
@@ -188,7 +183,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                           data-tooltip-id={`cdc-open-viz-tooltip-${config.runtime.uniqueId}`}
                         ></foreignObject>
                       </Group>
-                    </>
+                    </Group>
                   )
                 })
               )
@@ -199,7 +194,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         {/* Stacked Horizontal */}
         {config.visualizationSubType === 'stacked' && isHorizontal && (
           <>
-            <BarStackHorizontal data={cleanedData} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
+            <BarStackHorizontal data={data} keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys} height={yMax} y={d => d[config.runtime.yAxis.dataKey]} xScale={xScale} yScale={yScale} color={colorScale} offset='none'>
               {barStacks =>
                 barStacks.map(barStack =>
                   updateBars(barStack.bars).map((bar, index) => {
@@ -208,9 +203,9 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     config.barHeight = Number(config.barHeight)
                     let labelColor = '#000000'
                     // tooltips
-                    const xAxisValue = formatNumber(data[bar.index][bar.key])
+                    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 style = applyRadius(barStack.index, yAxisValue < 0)
+                    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
                     if (!hasMultipleSeries) {
@@ -264,7 +259,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             </Text>
                           )}
 
-                          {displayNumbersOnBar && textWidth + 50 < bar.width && (
+                          {displayNumbersOnBar && textWidth < bar.width && (
                             <Text
                               display={displayBar ? 'block' : 'none'}
                               x={bar.x + barStack.bars[bar.index].width / 2} // padding
@@ -280,7 +275,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 }
                               }}
                             >
-                              {formatNumber(data[bar.index][bar.key])}
+                              {xAxisValue}
                             </Text>
                           )}
                         </Group>
@@ -297,7 +292,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
         {config.visualizationSubType !== 'stacked' && (
           <Group>
             <BarGroup
-              data={cleanedData}
+              data={data}
               keys={config.runtime.barSeriesKeys || config.runtime.seriesKeys}
               height={yMax}
               x0={d => d[config.runtime.originalXAxis.dataKey]}
@@ -313,6 +308,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   <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={config.runtime.horizontal ? barGroup.y : 0}
                     left={config.runtime.horizontal ? 0 : (xMax / barGroups.length) * barGroup.index}
                   >
@@ -323,7 +319,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       let barY = bar.value >= 0 && isNumber(bar.value) ? bar.y : yScale(0)
                       let barGroupWidth = ((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (config.barThickness || 0.8)
                       let offset = (((config.runtime.horizontal ? yMax : xMax) / barGroups.length) * (1 - (config.barThickness || 0.8))) / 2
-
+                      const barX = bar.value < 0 ? Math.abs(xScale(bar.value)) : xScale(0)
+                      const barWidthHorizontal = Math.abs(xScale(bar.value) - xScale(0))
                       // ! Unsure if this should go back.
                       if (config.isLollipopChart) {
                         offset = (config.runtime.horizontal ? yMax : xMax) / barGroups.length / 2 - lollipopBarWidth / 2
@@ -341,7 +338,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       }
                       if (config.legend.colorCode && config.series.length === 1) barColor = palette[barGroup.index]
 
-                      let yAxisValue = formatNumber(bar.value)
+                      let yAxisValue = formatNumber(bar.value, 'left')
                       let xAxisValue = config.runtime[section].type === 'date' ? formatDate(parseDate(data[barGroup.index][config.runtime.originalXAxis.dataKey])) : data[barGroup.index][config.runtime.originalXAxis.dataKey]
 
                       if (config.runtime.horizontal) {
@@ -350,18 +347,38 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         xAxisValue = tempValue
                         barWidth = config.barHeight
                       }
+
+                      const barPosition = bar.value < 0 ? 'below' : 'above'
+                      const textX = barPosition === 'below' ? 0 : 0
+
                       // check if bar text/value string fits into  each bars.
                       let textWidth = getTextWidth(xAxisValue, `normal ${fontSize[config.fontSize]}px sans-serif`)
-                      let textFits = textWidth < bar.y - 5 // minus padding 5
-
+                      let textFits = textWidth < barWidthHorizontal - 5 // minus padding 5
                       let labelColor = '#000000'
 
                       // Set label color
                       if (chroma.contrast(labelColor, barColor) < 4.9) {
-                        if (textFits) labelColor = '#FFFFFF'
+                        textFits ? (labelColor = '#FFFFFF') : '#000000'
+                      }
+
+                      // 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 (barPosition === 'below') {
+                        textAnchor = textFits ? 'start' : 'end'
+                        textPadding = textFits ? 5 : -5
+                        if (config.isLollipopChart) {
+                          textAnchorLollipop = 'end'
+                          textPaddingLollipop = -10
+                        }
                       }
 
-                      const style = applyRadius(index, yAxisValue < 0)
+                      // create new Index based on bar value for border Radius
+                      const newIndex = bar.value < 0 ? -1 : index
+                      const style = 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
@@ -379,7 +396,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         </div>`
 
                       return (
-                        <>
+                        <Group key={`${barGroup.index}--${index}--${orientation}`}>
                           {/* This feels gross but inline transition was not working well*/}
                           <style>
                             {`
@@ -393,9 +410,9 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             <foreignObject
                               id={`barGroup${barGroup.index}`}
                               key={`bar-group-bar-${barGroup.index}-${bar.index}-${bar.value}-${bar.key}`}
-                              x={config.runtime.horizontal ? 0 : barWidth * bar.index + offset}
+                              x={config.runtime.horizontal ? barX : barWidth * bar.index + offset}
                               y={config.runtime.horizontal ? barWidth * bar.index : barY}
-                              width={config.runtime.horizontal ? bar.y : barWidth}
+                              width={config.runtime.horizontal ? barWidthHorizontal : barWidth}
                               height={isHorizontal && !config.isLollipopChart ? barWidth : isHorizontal && config.isLollipopChart ? lollipopBarWidth : barHeight}
                               style={{
                                 background: config.isLollipopChart && config.lollipopColorStyle === 'regular' ? barColor : config.isLollipopChart && config.lollipopColorStyle === 'two-tone' ? chroma(barColor).brighten(1) : barColor,
@@ -413,9 +430,9 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                 x={bar.y}
                                 y={config.barHeight / 2 + config.barHeight * bar.index}
                                 fill={labelColor}
-                                dx={textFits ? -5 : 5}
+                                dx={textPadding}
                                 verticalAnchor='middle'
-                                textAnchor={textFits ? 'end' : 'start'}
+                                textAnchor={textAnchor}
                               >
                                 {xAxisValue}
                               </Text>
@@ -424,10 +441,11 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             {orientation === 'horizontal' && config.isLollipopChart && displayNumbersOnBar && (
                               <Text
                                 display={displayBar ? 'block' : 'none'}
-                                x={`${bar.y + (config.isLollipopChart ? 15 : 5) + (config.isLollipopChart && barGroup.bars.length === bar.index ? offset : 0)}`} // padding
+                                x={bar.y} // padding
                                 y={0}
                                 fill={'#000000'}
-                                textAnchor='start'
+                                dx={textPaddingLollipop}
+                                textAnchor={textAnchorLollipop}
                                 verticalAnchor='middle'
                                 fontWeight={'normal'}
                               >
@@ -446,7 +464,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                             ;
                             {orientation === 'vertical' && (
                               <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={barColor} textAnchor='middle'>
-                                {formatNumber(bar.value)}
+                                {yAxisValue}
                               </Text>
                             )}
                             ;
@@ -478,7 +496,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                               </rect>
                             )}
                           </Group>
-                        </>
+                        </Group>
                       )
                     })}
                   </Group>
@@ -488,25 +506,48 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
 
             {Object.keys(config.confidenceKeys).length > 0
               ? data.map(d => {
-                  let xPos = xScale(getXAxisData(d))
-                  let upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
-                  let lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
+                  let xPos, yPos
+                  let upperPos
+                  let lowerPos
                   let tickWidth = 5
-
-                  return (
-                    <path
-                      key={`confidence-interval-${d[config.runtime.originalXAxis.dataKey]}`}
-                      stroke='#333'
-                      strokeWidth='2px'
-                      d={`
-                  M${xPos - tickWidth} ${upperPos}
-                  L${xPos + tickWidth} ${upperPos}
-                  M${xPos} ${upperPos}
-                  L${xPos} ${lowerPos}
-                  M${xPos - tickWidth} ${lowerPos}
-                  L${xPos + tickWidth} ${lowerPos}`}
-                    />
-                  )
+                  // DEV-3264 Make Confidence Intervals work on horizontal bar charts
+                  if (orientation === 'horizontal') {
+                    yPos = yScale(getXAxisData(d)) - 0.75 * config.barHeight
+                    upperPos = xScale(getYAxisData(d, config.confidenceKeys.upper))
+                    lowerPos = xScale(getYAxisData(d, config.confidenceKeys.lower))
+                    return (
+                      <path
+                        key={`confidence-interval-h-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
+                        stroke='#333'
+                        strokeWidth='px'
+                        d={`
+                        M${lowerPos} ${yPos - tickWidth}
+                        L${lowerPos} ${yPos + tickWidth}
+                        M${lowerPos} ${yPos}
+                        L${upperPos} ${yPos}
+                        M${upperPos} ${yPos - tickWidth}
+                        L${upperPos} ${yPos + tickWidth} `}
+                      />
+                    )
+                  } else {
+                    xPos = xScale(getXAxisData(d))
+                    upperPos = yScale(getYAxisData(d, config.confidenceKeys.lower))
+                    lowerPos = yScale(getYAxisData(d, config.confidenceKeys.upper))
+                    return (
+                      <path
+                        key={`confidence-interval-v-${yPos}-${d[config.runtime.originalXAxis.dataKey]}`}
+                        stroke='#333'
+                        strokeWidth='px'
+                        d={`
+                        M${xPos - tickWidth} ${upperPos}
+                        L${xPos + tickWidth} ${upperPos}
+                        M${xPos} ${upperPos}
+                        L${xPos} ${lowerPos}
+                        M${xPos - tickWidth} ${lowerPos}
+                        L${xPos + tickWidth} ${lowerPos}`}
+                      />
+                    )
+                  }
                 })
               : ''}
           </Group>