@cdc/chart 4.23.3 → 4.23.5

package/src/components/AreaChart.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useCallback } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 
 // cdc
 import ConfigContext from '../ConfigContext'
@@ -6,26 +6,29 @@ 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 * as allCurves from '@visx/curve'
-import { useTooltip, useTooltipInPortal, defaultStyles } from '@visx/tooltip'
+import { useTooltip, useTooltipInPortal, defaultStyles, Tooltip } from '@visx/tooltip'
 import { localPoint } from '@visx/event'
 import { bisector } from 'd3-array'
 
-const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
+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 } = useContext(ConfigContext)
+  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()
 
-  // used for offset on tooltip hover
-  let isEditor = window.location.href.includes('editor=true')
-
   // here we're inside of the svg,
   // it appears we need to use TooltipInPortal.
   const { TooltipInPortal } = useTooltipInPortal({
@@ -36,20 +39,21 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
 
   // Draw transparent bars over the chart to get tooltip data
   // Turn DEBUG on for additional context.
-  let barThickness = xMax / config.data.length
+  if (!data) return
+  let barThickness = xMax / data.length
   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') {
+    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') {
+    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)
@@ -58,51 +62,55 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
     }
   }
 
-  const handleMouseOver = useCallback(
-    (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 => d[config.xAxis.dataKey] === formattedDate)
-      }
-
-      let seriesToInclude = []
-      let yScaleMaxValues = []
-      let itemsToLoop = [config.runtime.xAxis.dataKey, ...config.runtime.seriesKeys]
+  const handleMouseOver = (e, data) => {
+    // get the svg coordinates of the mouse
+    // and get the closest values
+    const eventSvgCoords = localPoint(e)
+    const { x, y } = eventSvgCoords
 
-      itemsToLoop.map(seriesKey => {
-        return Object.entries(yScaleValues[0]).forEach(item => item[0] === seriesKey && seriesToInclude.push(item))
-      })
+    let closestXScaleValue = getXValueFromCoordinate(x)
+    let formattedDate = formatDate(closestXScaleValue)
 
-      // filter out the series that aren't added to the map.
-      seriesToInclude.map(series => yScaleMaxValues.push(Number(yScaleValues[0][series])))
-      seriesToInclude = Object.fromEntries(seriesToInclude)
-
-      let tooltipData = {}
-      tooltipData.data = seriesToInclude
-      tooltipData.dataXPosition = isEditor ? 300 + x + 20 : x + 20
-      tooltipData.dataYPosition = y - 20
+    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 tooltipInformation = {
-        tooltipData: tooltipData,
-        tooltipTop: 0,
-        tooltipValues: yScaleValues,
-        tooltipLeft: x
+    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)
-    },
-    [showTooltip] // eslint-disable-line
-  )
+    showTooltip(tooltipInformation)
+  }
 
   const TooltipListItem = ({ item }) => {
     const [label, value] = item
@@ -113,59 +121,94 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
     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])
+  const handleY = (d, index, s = undefined) => {
+    return yScale(d[s.dataKey])
   }
 
   return (
     data && (
       <ErrorBoundary component='AreaChart'>
-        <Group className='area-chart' key='area-wrapper' left={config.yAxis.size}>
-          {config.series.map((s, index) => {
-            let seriesColor = colorPalettesChart[config.palette][index]
+        <Group className='area-chart' key='area-wrapper' left={Number(config.yAxis.size)}>
+          {(config.runtime.areaSeriesKeys || config.runtime.seriesKeys).map((s, index) => {
+            let seriesData = data.map(d => {
+              return {
+                [config.xAxis.dataKey]: d[config.xAxis.dataKey],
+                [s.dataKey]: d[s.dataKey]
+              }
+            })
+
             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])))
+            if (config.xAxis.type === 'date') {
+              data.map(d => xScale(parseDate(d[config.xAxis.dataKey])))
+            }
 
             return (
-              <>
+              <React.Fragment key={index}>
                 {/* prettier-ignore */}
-                {/* this is the line that appears on top of the area chart */}
-                <LinePath data={data} x={d => handleX(d)} y={d => yScale(d[config.series[index].dataKey])} stroke={seriesColor} strokeWidth={2} strokeOpacity={1} shapeRendering='geometricPrecision' curve={curveType} strokeDasharray={s.type ? handleLineType(s.type) : 0} />
+                <LinePath
+                  data={seriesData}
+                  x={d => handleX(d)}
+                  y={d => handleY(d, index, s)}
+                  stroke={displayArea ?  colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000' : 'transparent'}
+                  strokeWidth={2}
+                  strokeOpacity={1}
+                  shapeRendering='geometricPrecision'
+                  curve={curveType}
+                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
+                />
 
                 {/* prettier-ignore */}
-                {/* filled in sections */}
-                <AreaClosed key={'area-chart'} fill={displayArea ? seriesColor : '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} />
+                <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={seriesData}
+                  x={d => handleX(d)}
+                  y={d => handleY(d, index, s)}
+                  yScale={yScale}
+                  curve={curveType}
+                  strokeDasharray={s.type ? handleLineType(s.type) : 0}
+                  />
 
-                <Bar x={d => handleX(d)} y={d => yScale(d[config.series[index].dataKey])} yScale={yScale} width={xMax} height={yMax} fill={DEBUG ? 'red' : 'transparent'} fillOpacity={0.05} style={DEBUG ? { stroke: 'black', strokeWidth: 2 } : {}} onMouseMove={e => handleMouseOver(e, data)} />
+                {/* 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 && (
+                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
                   <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={seriesColor}
+                    fill={displayArea ? (colorScale ? colorScale(config.runtime.seriesLabels ? config.runtime.seriesLabels[s.dataKey] : s.dataKey) : '#000') : 'transparent'}
                     style={{ filter: 'unset', opacity: 1 }}
                   />
                 )}
 
-                {/* bars to handle tooltips */}
+                {/* another tool for showing bars during debug mode. */}
                 {DEBUG &&
-                  config.data.map((item, index) => {
+                  data.map((item, index) => {
                     return (
                       <Bar
                         className='bar-here'
-                        x={barThickness * index + offset}
-                        y={d => yScale(d[config.series[index].dataKey])}
+                        x={Number(barThickness * index)}
+                        y={d => Number(yScale(d[config.series[index].dataKey]))}
                         yScale={yScale}
-                        width={barThicknessAdjusted}
+                        width={Number(barThickness)}
                         height={yMax}
-                        fill={'transparent'}
+                        fill={DEBUG ? 'red' : 'transparent'}
                         fillOpacity={1}
                         style={{ stroke: 'black', strokeWidth: 2 }}
                         onMouseMove={e => handleMouseOver(e, data)}
@@ -173,20 +216,19 @@ const CoveAreaChart = ({ xScale, yScale, yMax, xMax }) => {
                     )
                   })}
 
-                {tooltipData && (
-                  <TooltipInPortal key={Math.random()} top={tooltipData.dataYPosition} left={tooltipData.dataXPosition} style={defaultStyles}>
-                    <Group x={config.yAxis.size + 10} y={0}>
-                      <ul style={{ listStyle: 'none', paddingLeft: 'unset' }}>
-                        {Object.entries(tooltipData.data).map(item => (
-                          <li>
+                {tooltipData && Object.entries(tooltipData.data).length > 0 && (
+                  <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>
-                    </Group>
+                    </ul>
                   </TooltipInPortal>
                 )}
-              </>
+              </React.Fragment>
             )
           })}
         </Group>

package/src/components/BarChart.jsx

@@ -6,16 +6,14 @@ import chroma from 'chroma-js'
 import ErrorBoundary from '@cdc/core/components/ErrorBoundary'
 import ConfigContext from '../ConfigContext'
 import { BarStackHorizontal } from '@visx/shape'
+import { useHighlightedBars } from '../hooks/useHighlightedBars'
 
 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, tableData, formatDate, isNumber, getTextWidth, parseDate } = useContext(ConfigContext)
+  const { HighLightedBarUtils } = useHighlightedBars(config)
   const { orientation, visualizationSubType } = config
   const isHorizontal = orientation === 'horizontal'
-
+  const barBorderWidth = 1
   const lollipopBarWidth = config.lollipopSize === 'large' ? 7 : config.lollipopSize === 'medium' ? 6 : 5
   const lollipopShapeSize = config.lollipopSize === 'large' ? 14 : config.lollipopSize === 'medium' ? 12 : 10
 
@@ -28,21 +26,18 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
   const tipRounding = config.tipRounding
   const radius = config.roundingStyle === 'standard' ? '8px' : config.roundingStyle === 'shallow' ? '5px' : config.roundingStyle === 'finger' ? '15px' : '0px'
   const stackCount = config.runtime.seriesKeys.length
-  const barBorderWidth = 1
   const fontSize = { small: 16, medium: 18, large: 20 }
   const hasMultipleSeries = Object.keys(config.runtime.seriesLabels).length > 1
 
-  const applyRadius = (index, isNegative) => {
-    if (index === undefined || index === null || !isRounded) return
+  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,27 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
     }
     return style
   }
-  // }
+
+  const assignColorsToValues = () => {
+    const palettesArr = colorPalettes[config.palette]
+    const values = tableData.map(d => {
+      return d[config.legend.colorCode]
+    })
+    // Map to hold unique values and their  colors
+    let colorMap = new Map()
+    // Resultant array to hold colors  to the values
+    let result = []
+
+    for (let i = 0; i < values.length; i++) {
+      // If value not in map, add it and assign a color
+      if (!colorMap.has(values[i])) {
+        colorMap.set(values[i], palettesArr[colorMap.size % palettesArr.length])
+      }
+      // push the colosr to the result array
+      result.push(colorMap.get(values[i]))
+    }
+    return result
+  }
 
   const updateBars = defaultBars => {
     // function updates  stacked && regular && lollipop horizontal bars
@@ -136,7 +151,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
       <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 => {
@@ -148,7 +163,8 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                   // tooltips
                   const xAxisValue = config.runtime.xAxis.type === 'date' ? formatDate(parseDate(data[bar.index][config.runtime.xAxis.dataKey])) : data[bar.index][config.runtime.xAxis.dataKey]
                   const yAxisValue = formatNumber(bar.bar ? bar.bar.data[bar.key] : 0, 'left')
-                  const style = applyRadius(barStack.index, yAxisValue < 0)
+
+                  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) {
@@ -172,7 +188,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'>
+                        <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'>
                           {yAxisValue}
                         </Text>
                         <foreignObject
@@ -199,7 +215,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) => {
@@ -210,7 +226,7 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     // tooltips
                     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) {
@@ -297,7 +313,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]}
@@ -318,22 +334,44 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                     left={config.runtime.horizontal ? 0 : (xMax / barGroups.length) * barGroup.index}
                   >
                     {barGroup.bars.map((bar, index) => {
+                      const scaleVal = config.useLogScale ? 0.1 : 0
+                      const getHighlightedBarColorByValue = value => {
+                        const match = config?.highlightedBarValues.filter(item => {
+                          if (!item.value) return
+                          return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+                        })[0]
+
+                        if (!match?.color) return `rgba(255, 102, 1)`
+                        return match.color
+                      }
+
+                      const getHighlightedBarByValue = value => {
+                        const match = config?.highlightedBarValues.filter(item => {
+                          if (!item.value) return
+                          return config.xAxis.type === 'date' ? formatDate(parseDate(item.value)) === value : item.value === value
+                        })[0]
+
+                        if (!match?.color) return false
+                        return match
+                      }
+
+                      let highlightedBarValues = config.highlightedBarValues.map(item => item.value).filter(item => item !== ('' || undefined))
+
+                      highlightedBarValues = config.xAxis.type === 'date' ? HighLightedBarUtils.formatDates(highlightedBarValues) : highlightedBarValues
+
                       let transparentBar = config.legend.behavior === 'highlight' && seriesHighlight.length > 0 && seriesHighlight.indexOf(bar.key) === -1
                       let displayBar = config.legend.behavior === 'highlight' || seriesHighlight.length === 0 || seriesHighlight.indexOf(bar.key) !== -1
-                      let barHeight = orientation === 'horizontal' ? config.barHeight : isNumber(Math.abs(yScale(bar.value) - yScale(0))) ? Math.abs(yScale(bar.value) - yScale(0)) : 0
+                      let barHeight = orientation === 'horizontal' ? config.barHeight : isNumber(Math.abs(yScale(bar.value) - yScale(scaleVal))) ? Math.abs(yScale(bar.value) - yScale(scaleVal)) : 0
                       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(scaleVal))
                       // ! Unsure if this should go back.
                       if (config.isLollipopChart) {
                         offset = (config.runtime.horizontal ? yMax : xMax) / barGroups.length / 2 - lollipopBarWidth / 2
                       }
-                      const set = new Set()
-                      data.forEach(d => set.add(d[config.legend.colorCode]))
-                      const uniqValues = Array.from(set)
-
-                      let palette = colorPalettes[config.palette].slice(0, uniqValues.length)
+                      let palette = assignColorsToValues()
 
                       let barWidth = config.isLollipopChart ? lollipopBarWidth : barGroupWidth / barGroup.bars.length
                       let barColor = config.runtime.seriesLabels && config.runtime.seriesLabels[bar.key] ? colorScale(config.runtime.seriesLabels[bar.key]) : colorScale(bar.key)
@@ -351,18 +389,42 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                         xAxisValue = tempValue
                         barWidth = config.barHeight
                       }
+
+                      const barPosition = bar.value < 0 ? 'below' : 'above'
+
                       // 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'
+                      if (barColor && labelColor) {
+                        if (chroma.contrast(labelColor, barColor) < 4.9) {
+                          labelColor = textFits ? '#FFFFFF' : '#000000'
+                        }
+                      }
+
+                      // Set if background is transparent'
+                      labelColor = HighLightedBarUtils.checkFontColor(yAxisValue, highlightedBarValues, labelColor)
+
+                      // 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,6 +441,26 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                       ${xAxisTooltip}
                         </div>`
 
+                      const isRegularLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'regular'
+                      const isTwoToneLollipopColor = config.isLollipopChart && config.lollipopColorStyle === 'two-tone'
+                      const isHighlightedBar = config.orientation === 'vertical' ? highlightedBarValues?.includes(xAxisValue) : highlightedBarValues?.includes(yAxisValue)
+                      const highlightedBarColor = config.orientation === 'vertical' ? getHighlightedBarColorByValue(xAxisValue) : getHighlightedBarColorByValue(yAxisValue)
+                      const highlightedBar = config.orientation === 'vertical' ? getHighlightedBarByValue(xAxisValue) : getHighlightedBarByValue(yAxisValue)
+
+                      const background = isRegularLollipopColor ? barColor : isTwoToneLollipopColor ? chroma(barColor).brighten(1) : isHighlightedBar ? 'transparent' : barColor
+
+                      const borderColor = isHighlightedBar ? highlightedBarColor : config.barHasBorder === 'true' ? '#000' : 'transparent'
+
+                      const borderWidth = isHighlightedBar ? highlightedBar.borderWidth : config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0
+
+                      const finalStyle = {
+                        background,
+                        borderColor,
+                        borderStyle: 'solid',
+                        borderWidth,
+                        ...style
+                      }
+
                       return (
                         <Group key={`${barGroup.index}--${index}--${orientation}`}>
                           {/* This feels gross but inline transition was not working well*/}
@@ -394,15 +476,11 @@ 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,
-                                border: `${config.isLollipopChart ? 0 : config.barHasBorder === 'true' ? barBorderWidth : 0}px solid #333`,
-                                ...style
-                              }}
+                              style={finalStyle}
                               opacity={transparentBar ? 0.5 : 1}
                               display={displayBar ? 'block' : 'none'}
                               data-tooltip-html={tooltip}
@@ -414,21 +492,21 @@ 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>
                             )}
-                            ;
                             {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'}
                               >
@@ -444,13 +522,12 @@ export default function BarChart({ xScale, yScale, seriesScale, xMax, yMax, getX
                                   : formatNumber(data[barGroup.index][config.runtime.originalXAxis.dataKey])}
                               </Text>
                             )}
-                            ;
+
                             {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'>
+                              <Text display={config.labels && displayBar ? 'block' : 'none'} opacity={transparentBar ? 0.5 : 1} x={barWidth * (bar.index + 0.5) + offset} y={barY - 5} fill={labelColor} textAnchor='middle'>
                                 {yAxisValue}
                               </Text>
                             )}
-                            ;
                             {config.isLollipopChart && config.lollipopShape === 'circle' && (
                               <circle
                                 cx={orientation === 'horizontal' ? bar.y : barWidth * (barGroup.bars.length - bar.index - 1) + (isLabelBelowBar && orientation === 'horizontal' ? 0 : offset) + lollipopShapeSize / 3.5}